Как мне создать css-файл, используя webpack 4 и mini-css-extract-plugin? - PullRequest
Новая
       25

Как мне создать css-файл, используя webpack 4 и mini-css-extract-plugin?

0 голосов
/ 19 сентября 2018

Мне удалось получить min-css-extract-plugin top Генерацию CSS-файлов, но я не могу заставить его работать с SASS.Он отлично работает, когда я использую сервер веб-пакета, но он продолжает вставлять мои 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"
    })
  ]
}

1 Ответ

0 голосов
/ 19 сентября 2018

Чтобы 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' в конфигурациях веб-пакетов, не работают должным образом.

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

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

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

...