css，sass/less loader 的基本使用

安装CSS的Loader

npm i css-loader style-loader --save -D

const {resolve} = require('path');
const htmlPacker = require('html-webpack-plugin');
​
module.exports = {
    mode:"development",
    entry:{
        index:'./src/index.js'
    },
    output:{
        filename:"[name].js",
        path: resolve(__dirname,"build"),
    },
    module:{
        rules:[
            {   // loader: "style-loader"  使用单个loader
                // 用正则表达式寻找所有css结尾的文件进行打包
                test: /\.css$/,
                /* css-loader将css打包到index.js中， style-loader把css打包到html */
                // 和html的plugin一样，相对于加载顺序逆向写
                use:["style-loader", "css-loader"],
            }
        ]
    },
    plugins:[
        new htmlPacker({
            template:"./src/index.html",
            filename: "res.html",
            minify: {
                collapseWhitespace: true,
            }
        }),
    ]
    
}

 

---

 

打包SASS和LESS

什么是SASS/LESS？

由于css只是描述性语言，无法定义变量，使用条件语句等。因此，为了增加css的功能，让编写复杂css更加方便，人们就会用sass或者less作为css的预处理器。

打包less或者sass的步骤？

1. 下载node-sass/ less 和 sass-loader/ less-loader 插件

npm i -save-dev node-sass sass-loader
npm i -save-dev less less-loader

2. 在配置文件专用配置 module属性的 rules 属性，在里面填上对象，并且设定 test(正则找所有less或者scss结尾的文件)，然后再use中的数组内添加元素，最终顺序应该是： [style-loader, css-loader, 预处理器的loader]

   具体配置如下

const {resolve} = require('path');
const htmlPacker = require('html-webpack-plugin');
​
module.exports = {
    mode:"development",
    entry:{
        index:'./src/index.js'
    },
    output:{
        filename:"[name].js",
        path: resolve(__dirname,"build"),
    },
    module:{
        rules:[
            {   // loader: "style-loader"  使用单个loader
                // 用正则表达式寻找所有css结尾的文件进行打包
                test: /\.css$/,
                /* css-loader将css打包到index.js中， style-loader把css打包到html */
                // 和html的plugin一样，相对于加载顺序逆向写
                use:["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader","less-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader","sass-loader"]
            }
        ]
    },
    plugins:[
        new htmlPacker({
            template:"./src/index.html",
            filename: "res.html",
            minify: {
                collapseWhitespace: true,
            }
        }),
    ]
    
}

3. 建立scss或者less的样式文件，并在打包入口的js中引入。

4. 设定好output然后在控制台用指令进行打包