webpack con menos y postcss autoprefixer
Soy nuevo en webpack y estoy tratando de configurar todo para que funcione en un proyecto de reacción. Me las he arreglado para que todo funcione en el paquete web como esperaba, pero he llegado a un bloqueo con autoprefixer.
He seguido los documentos para post css y autoprefixer y obviamente me falta algo importante aquí o he hecho algo tonto. ¿Puedes echar un vistazo a mi configuración y avisarme si tienes alguna sugerencia?
Otros complementos de postcss funcionan bien como nanocss. aunque he intentado cssnext ya que creo que eso incluye autoprefixer de todos modos.
Supongo que es un problema de configuración del corrector automático.
Otra cosa está en la línea de comando si escribe información de npx autoprefixer. Todo se ve bien. No hay errores cuando construyo o ejecuto un servidor de desarrollo, simplemente no corrige automáticamente nada.
Aquí están todos mis archivos de configuración. Gracias por adelantado.
.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')
]
}
Ahora también he probado el consejo de Laurent. No estoy seguro de si esto es progreso o no, pero ahora estoy recibiendo algunos errores de registro. Mi configuración ahora se ve así sin 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"
};
registro es esto
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 no es una función, parece ser la fuente de mis problemas, pero. Todo parece estar bien desde el punto de vista de la configuración. Debería encontrarlo.
¿Algunas ideas?
¡Gracias!