webpack打包sass、scss、less预编译

webpack打包sass、scss、less预编译

Sass & Less

• sass，作为”世界上最成熟、最稳定、最强大的专业级CSS扩展语言”。兼容所有版本的css，且有无数框架使用sass构建
• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，Less 仅对 CSS 语言增加了少许方便的扩展，学习很容易

记录webpack打包less、sass的一个小工具

1. node版本v12.13.1，npm版本v6.12.1，webpack版本v5
2. 用到的插件

"devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "mini-css-extract-plugin": "^2.7.6",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }

3.webpack.config.js代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: process.env.NODE_ENV,
  entry: {
    app: './main.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-budle.js',
    publicPath: './'
  },
  module: {
    rules: [

      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'xxx.html',
      template: path.resolve(__dirname, 'index.html')
    }),
    new MiniCssExtractPlugin({ filename: 'css/[name].css' })
  ]
}

4.cli命令

"scripts": {
    "build": "cross-env NODE_ENV=development webpack --config ./webpack.config.js --progress --color",
    "build:prod": "cross-env NODE_ENV=production webpack --config ./webpack.config.js --progress --color"
  },

github : https://github.com/dingmengyao/compiler-pre.git