Webpack + SASS + Autoprefixer are not generating the CSS file

Question

I would like to compile my SCSS files to main.min.css with webpack. I'm using autoprefixer and the final file is not being generated. I tried a lot of options and I'm stuck now. What could be?

Basically, I'm developing on root/src/styles/...scss and I need to transpile and create a minified file in root/css with the name main.min.css.

My package.json:

{
  "name": "rms",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --output-public-path=/js/new-theme/"
  },
  "keywords": [],
  "author": "Rafael Perozin",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@material/tab-bar": "^3.1.0",
    "@material/tab-scroller": "^3.1.0",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "core-js": "^3.1.4",
    "css-loader": "^3.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "postcss-cli": "^6.1.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5"
  },
  "browserslist": [
    "last 2 versions",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 5",
    "opera >= 23",
    "ios >= 7",
    "android >= 4",
    "bb >= 10"
  ]
}

My webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.min.css'
        }),
    ],
    entry: {
        script: './src/scripts/main.js',
        style: './src/styles/main.scss'
    },
    output: {
        path: path.resolve(__dirname, './js/new-theme'),
        filename: 'main.min.js',
        publicPath: './js/new-theme'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            [
                                '@babel/preset-env',
                                    {
                                        "targets": {
                                            "browsers": [
                                                "last 2 versions",
                                                "chrome >= 71",
                                                "ie >= 11",
                                                "ios >= 8",
                                                "android >= 5",
                                                "safari >= 10",
                                                "firefox >= 61"
                                            ]
                                        },
                                        "useBuiltIns": "usage",
                                        "corejs": 3
                                    }
                                ]
                        ],
                        "plugins": [
                            ["@babel/transform-runtime"]
                        ]
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            path: path.resolve(__dirname, './css/new-theme'),
                            publicPath: './css/new-theme'
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            import: true,
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {}
                    }
                ]
            }
        ]
    }
}

When run npm run build shows no error just warning about mode.

see the current error image:

But for the autoprefixer to work it must be installed first, I do not see it in package.json :) — Grzegorz T., Jul 30 '19 at 15:29
I don't remember where I read but postcss-preset-env should already have autoprefixer I just need to require with plugins require with ident. Isn't it? — Rafael Perozin, Jul 30 '19 at 15:42

score 3 · Accepted Answer · answered Jul 30 '19 at 15:59

3

webpack.config.js - hear a link to an example can be useful ToDoList

js

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
  },
},

css/sass

 {
    // CSS SASS SCSS
    test: /\.(css|sass|scss)$/,
    use: [
      argv.mode === 'development'
        ? 'style-loader'
        : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
          sourceMap: true,
        },
      },
      {
        loader: 'postcss-loader'
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
 },

Add a file to the root folder postcss.config.js

module.exports = {
  plugins: {
   autoprefixer: {},
 },
};

package.json add

"browserslist": [
  "> 1%",
  "last 1 version",
  "not dead"
]

.babelrc

{
  "presets": [
   [
    "@babel/preset-env",
    {
      "useBuiltIns": "usage",
      "corejs": 3
    }
   ]
 ]
}

answered Jul 30 '19 at 15:59

Grzegorz T.

3,903
2
11
24

I forgot to ass SCSS entry. Then I tried my code and yours and both return ModuleBuildError: ... @import ..... Any idea how to fix? – Rafael Perozin Jul 30 '19 at 16:29
If you import into modules js -> `'import' ../scss/modules/_article.scss';` or in webpack.config.js ` entry: { script: ['./sources/js/index.js', './sources/scss/main.scss'], },` – Grzegorz T. Jul 30 '19 at 17:39
I tried with your code and with mine a hundred times and always returns error on node_modules @import in SCSS files. I updated my code on my question and inserted a print screen of error. I already tried to add ~ before the file name on SCSS file as the webpack documentation suggest and I was unsuccessful. Please, help me. – Rafael Perozin Jul 31 '19 at 08:39
The read is not updated yet, but you can use normally: https://github.com/rafaelperozin/webpack-project-structure – Rafael Perozin Jul 31 '19 at 09:01
Thank you very much for your help. I cloned the repository and run yarn install. And when I ran npm run start show me Error: spawn cmd ENOENT and when I ran npm run build show me UglifyJs Unexpected token: keyword. Any idea what could be? – Rafael Perozin Jul 31 '19 at 10:50
Delete node_modules and reinstall everything – Grzegorz T. Jul 31 '19 at 10:53
Look for a solution in google, install nodejs from scratch, clear cache npm more unfortunately I can not help. – Grzegorz T. Jul 31 '19 at 11:31

Webpack + SASS + Autoprefixer are not generating the CSS file

1 Answers1

Linked