postcss loader with webpack

Question

I'm trying to use postcss-loader plugin with webpack, but I can't understand how to use it, in my output build I doesn't have a css file and a js file but only a js file, and the css inside the builded js.

This is the my-container.js file:

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

class MyContainer extends React.Component {

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

export default MyContainer;

this is the container.scss file:

.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"));

This is my webpack config file:

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

I have checked the css in the js file and there isn't any vendor prefixes, for example in my scss code there is display: flex; that must generate some prefixes, anyone can tell me how setup it?

score 0 · Accepted Answer · answered Feb 14 '19 at 21:42

You import a file with a .scss extension:

import "./container.scss";

webpack will then only apply the loaders that match the .scss extension.

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

You're expecting webpack to also apply the rules of .css but it is not receiving files with the .css extension, so it can not transform it.

You need check if you're in a development environment (and need to inject the css in js with style-loader) or production (and need to extract the css with MiniCssExtractPlugin). This part of the webpack docs give an example how to do exactly that.

postcss loader with webpack

1 Answers1