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

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

terminalnpm install sass --save-dev

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

terminalnpm install sass-loader --save-dev

Bây giờ giả sử một số tệp SASS được nhập vào điểm đầu vào:

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

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

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

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

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