zoukankan      html  css  js  c++  java
  • webpack打包less与sass

    less

    1.安装 less-loader 与 less

    npm install less-loader less --save-dev
    

    2.配置webpack.config.js

    module.exports={
        //...code
        module:{
            rules:[
                {
                    //匹配规则
                    test:/.less$/,
                    //loader加载顺序 不能颠倒
                    use: ['style-loader', 'css-loader','less-loader']
                }
            ]
        }
    }
    

    3. 使用方法

    index.js

    import "./../less/index.less"
    

    sass

    1.安装 sass-loader 与 node-sass

    npm install sass-loader node-sass --save-dev
    

    2.配置webpack.config.js

    module.exports={
        //...code
        module:{
            rules:[
                {
                    //匹配规则
                    test:/.less$/,
                    //loader加载顺序 不能颠倒
                    use: ['style-loader', 'css-loader','sass-loader']
                }
            ]
        }
    }
    

    3. 使用方法

    index.js

    import "./../sass/index.scss"
    
  • 相关阅读:
    css3多列
    伪元素
    text文本样式二
    透明登录框
    透明度设置opacity
    超链接
    meta标签
    奇偶选择器
    OC跟Swift混编
    Swift中as as! as?的区别
  • 原文地址:https://www.cnblogs.com/roseAT/p/12083191.html
Copyright © 2011-2022 走看看