有作用域的 CSS
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
关于有作用域的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
<style lang="scss" scoped></style>
在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
参考：
