Загрузчик postcss с веб-пакетом

Question

Я пытаюсь использовать postcss-loader плагин с веб-пакетом, но я не могу понять, как его использовать, в моей выходной сборке у меня нет файла css и файла js, но есть только файл js, а файл css находится внутри встроенного js.

Это файл my-container.js:

import React from "react";
import "./container.scss";

class MyContainer extends React.Component {

  render() {
    return (
      <div className="my-container">...</div>
    );
  }
}

export default MyContainer;

это файл container.scss:

.my-container {
  display: flex;
  background-color: #333;
  z-index: 2147483000;
}

index.js:

import React from "react";
import MyContainer from "./my-container";

ReactDOM.render(<MyContainer/>, document.getElementById("demo"));

Это мой конфигурационный файл webpack:

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

module.exports = {
  entry: {
    "build": "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", 'postcss-loader']
      },
      {
        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
        use: [
          {
            loader: "url-loader"
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"]
  },
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "[name].[hash].js"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Я проверил CSS в файле JS, и нет никаких префиксов поставщиков, например, в моем коде Scss есть display: flex; что должно генерировать какие-то префиксы, кто-нибудь может подсказать, как это настроить?

Answer 1

Вы импортируете файл с .scss расширение:

import "./container.scss";

webpack тогда будут применяться только те загрузчики, которые соответствуют .scss расширение.

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

Вы ожидаете webpack также применять правила .css но он не получает файлы с .css расширение, поэтому оно не может преобразовать его.

Вам нужно проверить, если вы находитесь в среде разработки (и нужно ввести CSS в JS с style-loader) или производство (и нужно извлечь css с MiniCssExtractPlugin). В этой части документации по Webpack приведен пример, как это сделать.