使用CSS

Vue CLI项目支持PostCSS、 CSS模块和预处理器，包括Sass、Less和Stylus。

引用静态资源

所有编译后的CSS都会通过 css-loader来解析其中的url() 引用，并将这些引用作为模块请求来处理。这意味着可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果想引用一个npm 依赖中的文件，或者是想要用webpack alias，则需要在路径前加 ~的前缀来避免歧义。

预处理器

在创建项目的时候选择预处理器（Sass/Less/Stylus）。如果当时没有选好，内置的webpack仍然会被预配置为可以完成所有的处理。也可以手动安装相应的webpack loader

// Sass
npm install -D sass-loader node-sass

// Less
npm install -D less-loader less

// Stylus
npm install -D stylus-loader stylus

然后就可以导入相应的文件类型，或在 .vue 文件中这样使用：

<style lang="scss">
    $color: red;
</style>

自动化导入

如果想自动化导入文件（用于颜色、变量、mixin...），可以使用style-resource-loader。这里有一个关于Stylus的在每个单元组件和Stylus文件中导入 ./src/style/imports.styl的例子：

// vue.config.js
module.exports = {
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
    }
}

function addSrtleResource (rule) {
    rule.use('style-resource')
    .loader('srtle-resource-loader')
    .options({
        patterns: [
            path.resolve(__dirname, './src/style/imports.styl'),
        ]
    })
}

也可以使用 vue-cli-plugin-style-resource-loader

PostCSS

Vue CLI 内部使用了PostCSS。

你可以使用.postcssrc或者任何postcss-load-config 支持的配置源来配置PostCSS。也可以通过vue.config.js 中的css.loaderOptions.postcss 配置postcss-loader。

我们默认开启了 autopreflxer 。如果要配置目标浏览器，可使用package.json的browserslist字段。

 关于CSS中浏览器前缀规则的注意事项
 在生产环境构件中，Vue CLI会优化CSS并基于目标浏览器抛弃不必要的浏览器前缀。因为默认开启了autoprefixer，你只是用无前缀的css规则即可。

CSS Modules

你可以通过<style module> 以开箱即用的方式在 *.vue文件中使用CSS modules。

如果想在JavaScript中作为CSS modules导入CSS或其他预处理文件，该文件该以 .module.(css|les|scss|sass|styl)结尾：

import sryles from './foo.module.css'
// 所有支持的预处理器都一样工作
import sassStyles from './foo.module.scss'

如果你想去掉文件中的.module，可以设置vue.config.js中的css.requireModuleExtension 为false：

// vue.config.js
module.exports = {
     css: {
         requireModuleExtension: false
     }
}

如果你希望自定义生成CSS modules 模块的类名，可以通过 vue.config.js 中的 css.loaderOptions.css 选项来实现。所有的css-loader 选项在这里都是支持的，例如localldentName 和 camelCase:

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            css： {
                //一下配置在Vue CLI v4 与 v3 之间存在差异。
                // v3 可以参考css-loader v1 问档。
                // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
                modules: {
                    localldentName: '[name]-[hash]'
                },
                localsConvention: 'camelCaseOnly'
             }
        }
    }
}

向预处理器 loader 传递选项

有的时候想要向 webpack 的预处理器loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有Sass/Less 样式传入共享的全局变量：

// vue,config.js
module.exports = {
    css：{
        loaderOptions:{
            // 给sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设有 'src/variables.sass' 这个文件
                // 注意：在sass-loader v8 中，这个选项名是 'prependData'
                additionalData: `@import '~@/variables.sass'`
            }
            // 默认情况下 sass 选项会同时对 sass 和 scss 语法同时生效
            // 因为 sass 语法在内部也是由 sass-loader 处理的
            // 但是在配置 prependData 选项的时候
            // scss 语法会要求语句结尾必须有分号， sass 则要求必须没有分号
            // 在这种情况下，我们可以使用 scss 选项， 对 scss 语法进行单独配置
            scss: {
                additionalData: `@import '~@/variables.scss';`
            },
            // 给 less-loader 传递less.js 相关选项
            less: {
                globalVars: {
                    primary: '#fff'
                }
            }
        }
    }
}