Vue 中的 CSS

有作用域的 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

参考：

• 跨平台 CSS 中文字体解决方案
• Vue组件中使用Sass或者Less全局变量