I'm new to webpack and I'm trying to set everything up to work on a react project. I have managed to get everything working in webpack as expected but have hit a road block with autoprefixer.
I have followed the docs for both post css and autoprefixer and I'm obviously missing something important here or have done something daft. can you please take a look at my config and let me know if you have any suggestions.
Other postcss plugins are working fine like nanocss. althought I have tried cssnext as I think that includes autoprefixer anyway.
I'm assuming it's a autoprefixer config issue.
Another thing is in the command line if you type npx autoprefixer info. everything looks fine. No errors when I build or run dev server it just doesn't autoprefix anything.
Here are all my config files. Thanks in advance.
.browserlistrc
# Browsers that we support > 1% Last 2 versions IE 8 # sorry webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // Constant with our paths const paths = { DIST: path.resolve(__dirname, 'dist'), SRC: path.resolve(__dirname, 'src'), JS: path.resolve(__dirname, 'src/js'), }; // Webpack configuration module.exports = { entry: path.join(paths.JS, 'app.jsx'), output: { path: paths.DIST, filename: 'app.bundle.js', }, // Tell webpack to use html plugin and extract css to separate bundle plugins: [ new HtmlWebpackPlugin({ template: path.join(paths.SRC, 'index.html'), }), new ExtractTextPlugin('style.bundle.css'), ], // Loaders configuration module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ 'babel-loader', ], }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'postcss-loader', 'less-loader'], }), }, { test: /\.(png|jpg|gif)$/, use: [ 'file-loader', ], }, ], }, resolve: { extensions: ['.js', '.jsx'], }, }; postcss.config.js
module.exports = { plugins: [ require('autoprefixer'), // require('cssnano') ] } I have now also tried Laurent's advice. I'm not sure if this is progress or not but I am now getting some error logging. My config now looks like this with no postcss.config
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const webpack = require("webpack"); const autoprefixer = require("autoprefixer"); // Constant with our paths const paths = { DIST: path.resolve(__dirname, "dist"), SRC: path.resolve(__dirname, "src"), JS: path.resolve(__dirname, "src/js") }; // Webpack configuration module.exports = { entry: path.join(paths.JS, "app.jsx"), output: { path: paths.DIST, filename: "app.bundle.js" }, // Tell webpack to use html plugin and extract css to separate bundle plugins: [ new HtmlWebpackPlugin({ template: path.join(paths.SRC, "index.html") }), new ExtractTextPlugin("style.bundle.css"), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], // Loaders configuration module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [ "css-loader", { loader: "postcss-loader", options: { plugins: () => autoprefixer({ browsers: ["last 3 versions", "> 1%"] }) } }, "less-loader" ] }) }, { test: /\.(png|jpg|gif)$/, use: ["file-loader"] } ] }, resolve: { extensions: [".js", ".jsx"] }, devtool: "source-map" }; log is this
Project is running at http://localhost:8131/ webpack output is served from / Hash: 546e87b727efc5c86ece Version: webpack 3.10.0 Time: 2158ms Asset Size Chunks Chunk Names app.bundle.js 1.32 MB 0 [emitted] [big] main app.bundle.js.map 1.59 MB 0 [emitted] main index.html 297 bytes [emitted] [4] ./node_modules/react/index.js 190 bytes {0} [built] [16] multi (webpack)-dev-server/client?http://localhost:8131 ./src/js/app.jsx 40 bytes {0} [built] [17] (webpack)-dev-server/client?http://localhost:8131 7.95 kB {0} [built] [18] ./node_modules/url/url.js 23.3 kB {0} [built] [25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built] [27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built] [28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built] [30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built] [35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built] [36] (webpack)/hot/log.js 1.04 kB {0} [optional] [built] [37] (webpack)/hot/emitter.js 77 bytes {0} [built] [39] ./src/js/app.jsx 2.5 kB {0} [built] [43] ./node_modules/react-dom/index.js 1.36 kB {0} [built] [52] ./src/css/style.less 1.5 kB {0} [built] [failed] [1 error] [53] ./src/js/interface.js 384 bytes {0} [built] + 41 hidden modules ERROR in ./src/css/style.less Module build failed: ModuleBuildError: Module build failed: TypeError: css.walkAtRules is not a function at Processor.remove (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\processor.js:175:13) at Object.plugin (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\autoprefixer.js:87:32) at Object.parseOptions (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\options.js:5:37) at Promise.resolve.then (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:68:27) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) at runLoaders (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\webpack\lib\NormalModule.js:195:19) at C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:364:11 at C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:230:18 at context.callback (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Promise.resolve.then.then.catch (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:189:71) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/css/style.less @ ./src/js/app.jsx @ multi (webpack)-dev-server/client?http://localhost:8131 ./src/js/app.jsx Child html-webpack-plugin for "index.html": 1 asset [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 615 bytes {0} [built] [1] ./node_modules/lodash/lodash.js 540 kB {0} [built] [2] (webpack)/buildin/global.js 509 bytes {0} [built] [3] (webpack)/buildin/module.js 517 bytes {0} [built] Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js??ref--1-2!node_modules/less-loader/dist/cjs.js!src/css/style.less: [0] ./node_modules/css-loader!./node_modules/postcss-loader/lib?{}!./node_modules/less-loader/dist/cjs.js!./src/css/style.less 718 bytes {0} [built] [failed] [1 error] ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib?{}!./node_modules/less-loader/dist/cjs.js!./src/css/style.less Module build failed: TypeError: css.walkAtRules is not a function at Processor.remove (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\processor.js:175:13) at Object.plugin (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\autoprefixer\lib\autoprefixer.js:87:32) at Object.parseOptions (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\options.js:5:37) at Promise.resolve.then (C:\Users\Dan\Desktop\projects\WeatherReactProject\node_modules\postcss-loader\lib\index.js:68:27) at <anonymous> at process._tickCallback (internal/process/next_tick.js:188:7) webpack: Failed to compile. css.walkAtRules is not a function seems to be the source of my woes but. Everything seems to be fine from a config point of view. It should be finding it.
Any Ideas?
Thanks!