Не работает MiniCssExtractPlugin в webpack 4 для scss

Question

Начала изучать webpack. Поставила версию 4. Собираю файлы js, scss. Задача получить один сжатый файл js, и один сжатый css.

Вот package.json:

{
  "name": "template",
  "version": "1.0.0",
  "description": "template",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --watch --open",
    "build": "webpack-dev-server --mode production --watch --open"
  },
  "author": "mashuxa",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "path": "^0.12.7",
    "postcss-cli": "^6.0.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

Вот webpack.config:

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

let config = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "main.js",
        publicPath: "dist/"
    },
    devServer: {
        overlay: true
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: "/node_modules/",
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env",
                            "stage-3"
                        ]
                    }
                }
            },
            {
                test: /.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style.css"
        })
    ]
};

module.exports = (env, options) => {
    let production = options.mode === "production";

return config;
};

module.exports = config;

JS файлы собираются и минифицируются, стили встраиваются в тега style если использовать 'style-loader' , если использовать MiniCssExtractPlugin.loader главный style.css не генерируется. Подскажите, пожалуйста, в чем может быть проблема? Либо может есть альтернативные модули для webpack 4 для генерации одного отдельного файла стилей?

balintawak_eskrima · Answer

Если у тебя проблемы с получением css бандла то приведу пример, только с компиляцией sass:

И так, директоия проджекта:

.
├── assets
│   ├── css
│   │   └── app.scss
│   └── js
│       └── app.js
├── dist
├── index.html
├── package.json
├── package-lock.json
├── static
│   ├── app.css
│   └── app.js
└── webpack.config.js

5 directories, 8 files

package.json

{
  "name": "stackoverflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build-prod": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

webpack.config.js

'use strict';

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = (env, options) => {
    return {
        entry: {
            app: './assets/js/app.js'
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, "static")
        },
        module: {
            rules: [{
                test: /.(css|scss)$/,
                use: [
                    /* // for development mode
                    {
                        loader: "style-loader",
                        options: {
                            singleton: true
                        }
                    },
                    */
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: './static',
                            minimize: true
                        }
                    },
                    { loader: "css-loader" },
                    { loader: "sass-loader" }
                ]
            }]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css'
            })
        ],
        optimization: {
            minimizer: [
                new OptimizeCSSAssetsPlugin({})
            ]
        }
    };
};

app.js

import "../css/app.scss";

app.css

$primary-color: red;

.foo {
    color: $primary-color;
}

.bar {
    @extend .foo;
}

.hello {
    color: white;
    background-color: black;
}

Причем если собираешь в девелопмент режиме то тогда рекомендуется юзать style-loader, вместо MiniCssExtractPlugin.loader, тогда стили будут вертеться в горячем режиме внутри js бандла.

Если хочешь чтобы css бандл был вхлам ужатый, собирай при помощи опции "--mode production":

./node_modules/.bin/webpack --mode production

иначе даже опция minimize: true не помогает.

Не работает MiniCssExtractPlugin в webpack 4 для scss

One Answer

Add your own answers!

Ask a Question