CSS预处理器的使用方法

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)))   
        }, 
    }
未经允许不得转载:小月博客 » CSS预处理器的使用方法
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏