CSS预处理器

1.什么是css预处理器

CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。
不需要考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。
可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。

2. 常用的几种css预处理器

1. sass
2. less
3. stylus

3.css预处理器的使用方法

如果创建项目时没有选择需要的预处理器（Sass/Less/Stylus），则需手动安装相应loader

# Sass 
    npm install -D sass-loader node-sass
# Less 
    npm install -D less-loader less
# Stylus 
    npm install -D stylus-loader stylus

范例：App.vue修改为Sass

<style scoped lang="scss">   
    $color: #42b983;    
    a {        
        color: $color;   
    } 
</style>

4. 自动化导入样式

自动化导入样式文件 (用于颜色、变量、mixin等)，可以使用 style-resources-loader。

npm i -D style-resources-loader

配置

    const path = require('path')
    function addStyleResource(rule) {    
        rule.use('style-resource')
            .loader('style-resources-loader')       
            .options({        
                patterns: [            ,
                    path.resolve(__dirname, './src/styles/imports.scss'),       
                ],   
            }) 
    }
    module.exports = {   
        chainWebpack: config => {
            const types = ['vue-modules', 'vue', 'normal-modules', 'normal']        
            types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))   
        }, 
    }