Làm việc với LESS trong Webpack

Bây giờ hãy học cách làm việc với bộ tiền xử lý LESS. Để làm điều này, trước hết chúng ta cần cài đặt chính LESS:

terminalnpm install less --save-dev

Sau đó là loader tương ứng:

terminalnpm install less-loader --save-dev

Bây giờ hãy để một vài file LESS được import vào điểm vào:

src/index.jsimport './styles1.less';
import './styles2.less';

Hãy cấu hình Webpack để mã LESS được chuyển đổi thành CSS:

webpack.config.jsexport default {
  entry: './src/index.js',
  rules: [
    {
      test: /\.less$/i,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
      ],
    },
  ],
};

Và bây giờ hãy cấu hình Webpack để CSS đã được chuyển đổi được tập hợp thành một bundle chung:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
  
};