webpack中的加载器,处理样式文件style-loader,css-loader,处理less文件less,less-loader,处理sass文件,sass-loader,node-sass - 前端笔记-一,处理样式文件,css 安装style-loader,css-loader来处理样式文件 1).安装包 npm install style-loader ...

学习笔记

点滴记忆
回忆过往
首页>> >>webpack中的加载器,处理样式文件style-loader,css-loader,处理less文件less,less-loader,处理sass文件,sass-loader,node-sass - 前端笔记
一,处理样式文件,css
安装style-loader,css-loader来处理样式文件
    1).安装包
        npm install style-loader css-loader -D
    2).配置规则:更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型,支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }

二,处理样式文件,less文件的
安装less,less-loader处理less文件
    1).安装包
        npm install less-loader less -D
    2).配置规则:更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型,支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }

三,处理样式文件,scss的文件的
安装sass-loader,node-sass处理scss文件
    1).安装包
        npm install sass-loader node-sass -D
    2).配置规则:更改webpack.config.js的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型,支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » webpack中的加载器,处理样式文件style-loader,css-loader,处理less文件less,less-loader,处理sass文件,sass-loader,node-sass
版权所有:《前端笔记
文章标题:《webpack中的加载器,处理样式文件style-loader,css-loader,处理less文件less,less-loader,处理sass文件,sass-loader,node-sass
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-52.html

网友评论(0)