vue中css写法_Vue 中的 CSS

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