загрузчик postcss с веб-пакетом - PullRequest
Новая
       44

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

0 голосов
/ 14 февраля 2019

Я пытаюсь использовать плагин 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"));

Это мой конфигурационный файл веб-пакета: 

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;, который должен генерировать некоторые префиксы, кто-нибудь может сказать мне, как его настроить?

1 Ответ

0 голосов
/ 15 февраля 2019

Вы импортируете файл с расширением .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). В этой части документации по веб-пакету приведен пример, как именно это сделать.

...