webpack(7)_CSS_配置Less和Sass

本篇文章主要讲解webpack对Less和Sass的打包配置：

安装css-loader
安装style-loader
安装less-loader和sass-loader

实例

初始化项目，创建package.json
npm init
安装style-loader
npm install style-loader --save-dev
安装css-loader
npm install css-loader --save-dev
安装less-loader
npm install less-loader less --save-dev
安装sass-loader
npm install sass-loader node-sass --save-dev
创建dist目录，用于打包输出
创建src/css/base.less文件，并添加代码

@mainColor:#000;
html{
  background: @mainColor;
}

创建src/app.js，并引入base.less

import './css/base.less';

创建webpack.config.js并配置

// 引入node的path模块
var path = require('path');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录
        publicPath: './dist/',
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.less$/, // 正则匹配要识别的css，这里改成.less
                use: [
                    {
                        loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: 'css-loader' // 使用css-loader进行处理
                    },
                    { 
                        loader:'less-loader' // 引入less-loader
                    }
                ]
            }
        ]
    }
}

这里需要注意的是loader的执行顺序是从下往上，所以会先执行less-loader将less代码转化成css代码，再由css-loader处理css代码，再由style-loader处理样式。

执行打包命令
webpack生成app.bundle.js
创建index.html并引入打包后的app.bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/app.bundle.js"></script>
</body>
</html>

运行结果
从下图可以看到样式中已经将less代码转化成css代码。

sass的配置与less基本一样，所以这里不做讲解。

webpack(7)_CSS_配置Less和Sass

实例

猜你喜欢