search

webpack-contrib / mini-css-extract-plugin

Lightweight CSS extraction plugin
MIT License
4.67k stars 388 forks source link

Dart sass compilation #914

Closed stratboy closed 2 years ago

stratboy commented 2 years ago

Feature Proposal

Dart sass compilation

Feature Use Case

Simply it doean't compile dart sass correctly.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System: OS: macOS 11.6 CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz Memory: 9.44 GB / 32.00 GB Binaries: Node: 14.16.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.21.0 - /usr/local/bin/npm Browsers: Chrome: 98.0.4758.102 Firefox: 97.0 Safari: 15.0 Packages: babel-loader: ^8.2.3 => 8.2.3 browser-sync-webpack-plugin: ^2.3.0 => 2.3.0 file-loader: ^6.2.0 => 6.2.0 lodash-webpack-plugin: ^0.11.6 => 0.11.6 sass-loader: ^12.6.0 => 12.6.0 webpack: ^5.69.0 => 5.69.0 webpack-bundle-analyzer: ^4.5.0 => 4.5.0 webpack-cli: ^4.9.2 => 4.9.2

alexander-akait commented 2 years ago

Please use sass-loader to run dart-sass

stratboy commented 2 years ago

Ok, thank you, do you mean like this?

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [MiniCssExtractPlugin.loader, "sass-loader"],
      },
    ],
  },
};

I can't get why there's also MiniCssExtractPlugin.loader. But I really have difficulties understanding how webpack works, it's quite complicated to me.

alexander-akait commented 2 years ago

We have simple example https://github.com/webpack-contrib/mini-css-extract-plugin#recommended