有作用域的 CSS

当

/* 全局样式 */

/* 本地样式 */

关于有作用域的CSS 官方文档在 这里

在 vue 项目里使用scss

安装node-sass 和 sass-loader :

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

npm install --save sass-loader node-sass

在Vue中使用 SCSS 变量

在 assets 目录下新建一个css 目录，然后在css 目录下新建一个 variables.scss文件存放我们的scss变量

安装 sass-resources-loader

npm install sass-resources-loader --save-dev

在项目build文件夹里找到utils.js ，找到下边代码

return {

css: generateLoaders(),

postcss: generateLoaders(),

less: generateLoaders('less'),

sass: generateLoaders('sass', { indentedSyntax: true }),

scss: generateLoaders('sass'),

stylus: generateLoaders('stylus'),

styl: generateLoaders('stylus')

}

把上面这句scss: generateLoaders('sass')，改成如下：

scss: generateLoaders('sass').concat(

{

loader: 'sass-resources-loader',

options: {

resources: path.resolve(__dirname, '../src/assets/css/variables.scss')//这里按照你的文件路径填写

}

}

)

改完之后，重新运行npm run dev (不重新运行会报错)就可以了，无需再引入，就可以在我们任何组件里愉快地用我们的全局变量了

TIPS： 如果需要全局使用的除了变量还有其他的，比如mixin什么的，可以分类别在 assets/css下创建好scss文件，然后import到一个总的scss文件里，然后将这个总的scss 文件全局引入。或者，在utils.js 文件里的resources 里传入一个数组也可以。

引入CSS文件

1. 引入第三方 CSS

以引入 normalize.css 为例

首先安装 normalize.css:

npm install --save normalize.css

然后可以看到package.json里多了这个：

image.png

引用：

image.png

还是在控制台看：

image.png

normalize.css 和 reset.css的区别：

normalize.css ：统一默认样式，让你的页面的默认样式在每一个浏览器都是一样的

reset.css ： 重置样式

2. 引入自己写的CSS

在Vue 项目 中引入自己写的 reset.scss

在 src/assets 文件夹下新建一个 reset.scss文件

image.png

reset.scss 中关于中文字体，可以参考这个网站： 跨平台 CSS 中文字体解决方案

在 main.js中引入

image.png

然后就可以在控制台看到我们的css已经成功引入了：

image.png

参考：