使用方法

scss/sass

1.js中引入

import 'xxx.scss'

2.安装loader

$ npm install sass-loader sass webpack --save-dev

安装的sass是语法的模块，sass-loader可以使用node-sass或者dart-sass，推荐使用dart-sass。
3.配置webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',//或者MiniCssExtractPlugin.loader，css的引入方式不同
          'css-loader',//将css转化为commonjs的规范
          {
            loader: 'sass-loader',//将sass转化成css
            options: {
              // Prefer `dart-sass`
              implementation: require('sass'),//选择dart-sass或者node-sass模块，默认就是dart-sass
            },
          },
        ],
      },
    ],
  },
};

less

1.安装loader
别忘了css-loader和其他的模块。

$ npm install less-loader --save-dev

2.配置webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'], 
        //使用插件引入html，使用css-loader转译css，使用less-loader转译less
      },
    ],
  },
};

stylus

1.安装loader
别忘了css-loader和其他的模块。

$ npm install stylus-loader stylus --save-dev

stylus是语法的内容。
2.配置webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader,'css-loader','stylus-loader'], 
        //使用插件引入html，使用css-loader转译css，使用less-loader转译less
      },
    ],
  },
};