webpack com menos e autoprefixer do postcss
Eu sou novo no webpack e estou tentando configurar tudo para funcionar em um projeto de reação. Consegui fazer tudo funcionar no webpack conforme o esperado, mas atingi um obstáculo com o autoprefixer.
Eu segui os documentos para post css e autoprefixer e obviamente estou perdendo algo importante aqui ou fiz algo estúpido. você pode dar uma olhada na minha configuração e deixe-me saber se você tem alguma sugestão.
Outros plugins postcss estão funcionando bem como nanocss. Apesar de ter tentado o cssnext, acho que inclui o autoprefixer de qualquer maneira.
Estou assumindo que é um problema de configuração do autoprefixer.
Outra coisa está na linha de comando se você digitar npx autoprefixer info. tudo parece bem. Sem erros ao criar ou executar o servidor de desenvolvimento, ele simplesmente não corrige automaticamente nada.
Aqui estão todos os meus arquivos de configuração. Desde já, obrigado.
.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')
]
}
Agora também tentei o conselho de Laurent. Não tenho certeza se isso é progresso ou não, mas agora estou recebendo algum log de erro. Minha configuração agora fica assim sem 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 é este
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 não é uma função que parece ser a fonte dos meus problemas, mas. Tudo parece estar bem do ponto de vista da configuração. Deveria estar encontrando.
Alguma ideia?
Obrigado!