Как мне сгенерировать файл css с помощью webpack 4 и mini-css-extract-plugin?

Question

Я смог получить min-css-extract-plugin top генерацию CSS-файлов, но я не могу заставить его работать с SASS. Он отлично работает, когда я использую сервер webpack, но он продолжает вставлять мои scss в мой файл javascript вместо того, чтобы создавать отдельный файл CSS.

У меня есть index.html, index.js и main.scss, которые хранятся в / src

webpack.config.js:

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


module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
      ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

Answer 1

Иметь mini-css-extract-plugin на самом деле извлечь ваш CSS в отдельный файл, вам нужно импортировать ваш CSS (или другое расширение) в entry файл (index.js в твоем случае). Кроме того, используя process.env.NODE_ENV Значение для определения параметров разработки или производства внутри вашей конфигурации Webpack на самом деле не работает.

Из руководства по конфигурации производства Webpack:

Вопреки ожиданиям, process.env.NODE_ENV не установлен в "production" в сценарии сборки webpack.config.js см. № 2537. Таким образом, такие условия, как process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' в конфигурациях webpack не работают должным образом.

Вам нужно будет написать правило CSS без style-loader за mini-css-extract-plugin Загрузчик вступает в силу:

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "sass-loader"
  ]
}

Тогда, так как вы удалите style-loader Исходя из этого правила, вам нужно создать отдельные конфигурации Webpack для производства и разработки, чтобы вы могли использовать их в разработке.