0

我正在尝试将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;中必须生成一些前缀，任何人都可以告诉我如何设置它？

4

1 回答 1

0

您导入带有.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 文档的这一部分给出了一个如何做到这一点的例子。

于 2019-02-14T21:42:50.297 回答