带有 webpack 的 postcss 加载器

Question

我正在尝试将 postcss-loader 插件与 webpack 一起使用，但我不明白如何使用它，在我的输出构建中我没有 css 文件和 js文件但只有一个js文件，而构建的js中的css。

这是我的-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"
    })
  ]
};

我检查了js文件中的css，没有任何供应商前缀，例如在我的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 的文件，因此无法转换它。

您需要检查您是在开发环境中（并且需要使用 style-loader 在 js 中注入 css）还是生产环境（并且需要使用提取 css MiniCssExtractPlugin)。 This part 的 webpack 文档给出了一个如何做到这一点的例子。

带有 webpack 的 postcss 加载器

postcss loader with webpack

javascript

webpack

postcss-loader