Doesn't work with webpack 2 #92
Comments
|
Do you have any docs of API changes in loaders? |
|
No docs, it's webpack you know. Anyway I found this, take a look please at loaders section https://gist.github.com/sokra/27b24881210b56bbaff7 |
|
ExtractTextPlugin 1 doesn't work with Webpack 2 - maybe that's the issue not the postcss-loader |
|
@jantimon I use extract-text-webpack-plugin@^2.0.0-beta |
|
same with me . |
|
Maybe this stack can help: Looks like the css loader exports javascript. Logging I tried |
|
FWIW, I'm using postcss-loader and webpack2 with no issues, but I don't have sass-loader in the stack. I've had issues with combining the setup with other magic loader, like postcss-import etc. |
|
Are you using css loader?
|
|
Yep, and the config structure is the same: |
|
Ah I see the execution order is different - for me postcss runs first, css-loader second. Maybe that's causing an issue on your end if css-loader is producing JS, and later post-css loader is expecting css input? |
|
Indeed, I'm trying this later and'll let you know thx! |
|
@eugene1g I'm having issues using webpack2 with postcss-import as well. My use case is with SUITCSS preprocessor, here's the stack trace: |
|
The loader configuration in webpack 2 itself has changed, which, i think, requires you to set the loader name without the query string. So maybe you should change the config to this (untested): ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: [
{ loader: 'css-loader', query: {sourceMap: true} },
{ loader: 'postcss-loader' }
]
})I'm not so sure about the order, but you get the idea. |
|
@panjiesw You've pretty much got it. Here's an excerpt from my const filePath = require('./paths');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
resolve: {
modules: [ 'node_modules', filePaths.SRC ],
extensions: [ '.css', '.ts', '.tsx', '.js', '.jsx' ]
},
output: {
path: filePaths.DIST,
publicPath: '/',
filename: '[name].js'
},
module: {
loaders: [
// .... other loaders
{
test: /\.css$/,
include: [ filePaths.src ],
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{ loader: 'css-loader', query: { modules: true, sourceMaps: true } },
'postcss-loader'
]
})
}
]
},
plugins: [ // https://github.com/webpack/webpack/issues/3018#issuecomment-248633498
new webpack.LoaderOptionsPlugin({
options: {
context: filePaths.root,
postcss: [ // <---- postcss configs go here under LoadOptionsPlugin({ options: { ??? } })
require('postcss-cssnext'),
require('lost')(),
require('postcss-reporter')()
]
// ...other configs that used to directly on `modules.exports`
}
}),
new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })
]
}; |
|
Fixed in #104 |
|
I am using the following setup for const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer')
module.exports = {
entry: './index.js',
devtool: 'inline-source-map',
output: {
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1!postcss-loader'
},
{
test: /\.js$/, exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2'
}
]
},
plugins: [
new HtmlWebpackPlugin({ title: 'Example', template: './index.html' }),
new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
],
} |
...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: { plugins: () => [...plugins] } },
]
},
{
test: /\.js$/,
use: [
{ loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-2'] } }
],
exclude: /node_modules/,
}
]
}
...
|
|
@michael-ciniawsky What is Here is my config... |
|
Absolutely the same here |
|
@StevenIseki if you aren't using any postcss plugins then just remove it to get it to work. FYI |
|
Just spent some time fixing this issue in my react boilerplate. Check this commit I had to move my postcss plugins to a Then had a weird issue with a production build if I use |
|
@andykenward I am using just the 1 plugin |
|
@StevenIseki do you have a repo i can look at? |
|
The repo I am testing this on is https://github.com/vacenz/last-draft Once I get the setup working I will port it over to my boilerplate projects as well |
|
@StevenIseki the latest commit ld-x/last-draft@a0f1bb2 worked for me. Saw it autoprefixing this css when i changed it to I suggest you add |
|
Finally I had something working (with webpack 2.2.1. and extract text plugin @2.0.0-beta). I'll put it here: |
|
@francoisromain Yep webpack 2.2.1 ships with |
|
@michael-ciniawsky thanks for the info. Could you please show what will be the equivalent of the code above with webpack 2 and extract-text-webpack-plugin 2? |
|
@michael-ciniawsky Nice! I didn't saw your reply when I posted my reply to ai. So it's more of waiting for it to be fixed by Webpack 2.3 (although seems that on 2.2.1 it's already fixed/removed, but haven't tested it yet). (I will edit my first reply after testing it out on 2.2.1) |
test: /\.css$/,
use: ExtractTextPlugin.extract({
- fallbackLoader: 'style-loader',
+ fallback: 'style-loader',
- loader: [{
+ use: [{
- loader: 'css-loader?sourceMap',
+ loader: 'css-loader',
+ options: { sourceMap: true, importLoaders: 1 }
}, {
- loader: 'postcss-loader?sourceMap',
+ loader: 'postcss-loader',
options: {
+ sourceMap: true
plugins: () => [
postcssImport({ addDependencyTo: webpack }),
postcssCssnext({
browsers: ['last 2 versions', 'ie >= 9'],
compress: true,
}),
postcssInlineSvg,
],
},
}],
})
but not atm 😛 (v2-rc*), wait until v2@latest is out @edmundo096 webpack v2.2.1 ships the ident fix, it's finally working now |
|
@michael-ciniawsky cool, thank you! |
|
I don't understand a simple thing. It works, but where must I add an option to support only 2 latest browser versions? Please dont suggest LoaderOptionsPlugin, or postcss.config.js, or another bloatware. |
- require('autoprefixer')
+ require('autoprefixer')({ browsers: 'last 2 versions' }) |
|
What am I doing wrong? I don't get any build errors but I don't see the CSS rules prefixed. The autoprefixer was working fine when I was using webpack 1. If I use the propossed configuration in the readme: I get this error: I'm using this |
|
@gazpachu Webpack Version >= v2.2.1? Are you trying to set PostCSS options in both |
|
@michael-ciniawsky it turned out to be that I had to specify the location of the config file. I thought it would automatically read the same folder level where the webpack.config.js file is located but that was not the case. On the other hand, I've noticed that the autoprefixer is not adding |
|
@gazpachu dependant on what browsers you have defined. Add some older browsers and it should prefix as required |
|
@gazpachu I got the same issue. After some research, I concluded how the loading of I recommend you read my suggestions in the comment above #92 (comment). Summed up, if you use Otherwise, you should pass the options by any of other ways used by cosmiconfig, or indicate its location by the query params For the prefixes, Autoprefixer applies it depending the current browser use. See the README first lines of https://github.com/postcss/autoprefixer. |
|
as webpack |
|
@milewski Hmm that's weird I need to check that, got a similiar issue @extract-text-webpack-plugin maybe it's a bug :/ introduced recently again, please post your |
|
|
According to Tobias (sokra) there weren't any changes in webpack, could you please try
The Error sounds unrelated to what was bug before, when the |
- { loader: 'sass-loader', query: { sourceMap: true } }
+ { loader: 'sass-loader', options: { sourceMap: true } } |
|
Okay here we go Changing { loader: 'sass-loader', options: { sourceMap: true } }removing // { loader: 'resolve-url-loader' },PostCSS options inside. also fails {
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('autoprefixer')({
browsers: [
"> 5%",
"last 2 versions"
]
})
]
}
}
},without ETWP also fails {
test: /\.s?css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
{
loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('autoprefixer')({
browsers: [
"> 5%",
"last 2 versions"
]
})
]
}
}
},
// { loader: 'resolve-url-loader' },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},without ETWP + ident = Works {
test: /\.s?css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
return [
require('autoprefixer')({
browsers: [
"> 5%",
"last 2 versions"
]
})
]
}
}
},
// { loader: 'resolve-url-loader' },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},You can have a look at this with the real files i am using here: https://github.com/milewski/portfolio |
|
oh.. this works // { loader: 'style-loader' },
{ loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },and this also works { loader: 'style-loader' },
{ loader: 'css-loader', options: { minimize: true } },but together both fail (unless ident is set) so the problem might be in |
|
I also find that I have to give {
entry: './src/css/test.css',
output: {
path: __dirname,
filename: 'assets/dummy.css'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
{
loader: 'postcss-loader',
options: {
// ident: 'remove-this-and-it-fails',
plugins: [ require('postcss-cssnext')() ]
}
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin("assets/bundle.css")
]
}with test.css: @import url('inner.css');
body {
& div {
color: red;
}
}leads to:
With Here's a complete example: |
|
I can confirm behaviour. There is webpack.config.js // ...
// ----------------
// PostCSS plugins
const postCssPlugins = function () {
let postPluginConf = [];
postPluginConf.push(
require('autoprefixer')({
browsers: ['> 0.0001%'],
cascade: true,
remove: true
})
);
postPluginConf.push(
require('css-mqpacker')()
);
postPluginConf.push(
require('cssnano')({
discardComments: {
removeAll: true
},
autoprefixer: false,
zindex: false,
normalizeUrl: false
})
);
return postPluginConf;
};
// ...
// ----------------
// MODULE RULES
config.module = {
rules: [
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: postCssPlugins,
sourceMap: true
}
}
]
})
},
{
test: /\.(scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
// ident: 'remove-this-and-it-fails',
plugins: postCssPlugins,
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}
]
};
// ...The build will fail. It can be resolved either by adding postcss.config.js module.exports = {
plugins: [
require('autoprefixer')({
cascade: true,
remove: true
}),
require('css-mqpacker')(),
require('cssnano')({
discardComments: {
removeAll: true
},
autoprefixer: false,
zindex: false,
normalizeUrl: false
})
]
};webpack.config.js // ----------------
// MODULE RULES
config.module = {
rules: [
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
})
},
{
test: /\.(scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}
]
};
// ... |
|
Sadly none of these suggestions worked for me, still getting postcss error. Oh well, reverting to angular-cli for the moment. |
|
Same here... Nothing worked in my case. However I have a slightly different setup regarding css as I use sass: I have tried all the things I have been reading about. The only thing that changes for me is that I use sass where most of the people use pure css (in the examples I see).. I wonder if I have any issue because of this as none of the solution provided here is working for me. Any hint? I'm basically slowly giving up on the autoprefixer thing... It becomes very annoying. No doc matches, it's unclear whether the plugins are for webpack 1 or 2.. I start to get lost. Any ideas, suggestions would be very welcome. Thanks for reading! |
|
@DanDvoracek try this build without any rm -rf public/assets/** && NODE_ENV=development ./node_modules/webpack/bin/webpack.js --config=$(pwd)/webpack.front.config.js --progress |
|
@kroko https://github.com/WARP-LAB/WARP-GUIDES-WEBPACK-2/blob/master/01-webpack-guide-basic/webpacktest-basic/.postcssrc.js#L20 - .filter((e) => e !== null)
@DanDvoracek Yes this config and don't forget to actually add { // for css stuff...
test: /\.sass$/,
use: extractSass.extract({
fallback: "style-loader",
use: [
{ loader: "css-loader" },
+ 'postcss-loader',
{ loader: "sass-loader" }
]
})
} |
|
@michael-ciniawsky i haven't checked it. i remember that some time ago that was not the case (see my ticket), so it has stuck as a habit to clear out nulls from |
|
I don't know for |
|
Thanks a lot @kroko and @michael-ciniawsky 👍 I will give it a try and let you know :D EDIT: tested.Thanks @kroko , your file put me on the track for what I was doing wrong. All good now! |
and others
Hello guys. Looks like it doesn't works with the latest webpack 2 beta.
Then I ran webpack-dev-server and it doesn't finish.
Some guys have trouble too here webpack/webpack#2812
The text was updated successfully, but these errors were encountered: