Question

我正在尝试将postcss-loader插件与webpack一起使用，但是我不明白如何使用它，在我的输出版本中，我没有css文件和js文件，只有js文件，以及内置js中的CSS。

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

我已经检查了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注入）或生产环境中（并且需要使用MiniCssExtractPlugin来提取css）。 Webpack文档中的This part提供了一个示例，说明了如何做到这一点。

带webpack的postcss加载器

1 个答案: