Syntax should be updated to new webpack loaders syntax? #265
Comments
|
Definitely. It should also follow the pattern of const extractCSS = new ExtractTextPlugin(/*...*/);
module.exports = () => {
return {
postcss: {plugins: [autoprefixer(autoprefixerOpts)], sourceMap: true},
loaders: [
{test: /\.scss/i, loader: extractCSS.extract(['css?sourceMap', 'postcss', 'sass?sourceMap'])}
]
};
};to the new use + options syntax: const extractCSS = new ExtractTextPlugin(/*...*/);
const postcssOpts = postcss: {plugins: [autoprefixer(autoprefixerOpts)], sourceMap: true};
module.exports = () => {
return {
rules: [
{test: /\.scss/i, use: [
extractCSS.extract([ // This is basically "use"
{loader: 'css', options: {sourceMap: true}}
{loader: 'postcss', options: postcssOpts}
{loader: 'sass', options: {sourceMap: true}
])
]}
]
};
};This seems like the right approach unless the new "rules" syntax allows extract-text-webpack-plugin to somehow work as the first item in the "use" array. I haven't looked at the source yet to see how this might work, but it seems unlikely. |
|
Doesn't seem like it works yet, but hopefully they will update it soon to match with the new webpack2 beta25 |
|
Yes, I agree. This could be very frustrating for users when migrating to webpack 2. |
|
Hello, I'm currently trying to figure out how i can configure this plugin with post-css like I did with Webpack 1.x. Is this supposed to work already in some form? Here's what I have configured for now and that isn't working (which I guess is due to this very issue :p): Where commonData.postcss is: The above gives me the following errors: Can I change this somehow for now and get it working? |
|
@dsebastien This is my production webpack config entries only for scss I got set up few days ago. Only thing is that sourceMaps get always generated, even if I don't want to. {
test: /\.(scss)$/i,
// using "loader" instead of newer "use"
loader: ExtractTextPlugin.extract({
loader: [
{
loader: 'css-loader',
// current extract-text-plugin supports query not never options format
query: {
importLoaders: 3,
minimize: true,
// Even if disabled sourceMaps gets generated
sourceMap: false
}
},
{loader: 'postcss-loader'},
{loader: 'resolve-url-loader'},
{
loader: 'sass-loader',
query: {
// Enable sourcemaps for resolve-url-loader to work properly
sourceMap: true
}
}
]
})
}plugins: [
/**
* LoaderOptionsPlugin is used for aid migrationfor older loaders
* @reference https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#loaderoptionplugin-context
*/
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
/**
* resolve-url-loader fix
* @reference https://github.com/bholloway/resolve-url-loader/issues/33#issuecomment-249830601
*/
context: path.join(__dirname, 'src'),
output: {
path: path.join(__dirname, 'dist')
},
/**
* Legacy postCSS config
* @reference https://github.com/azat-io/webpack2-css-modules-demo/blob/master/scripts/webpack.config.babel.js
*/
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions', 'IE > 10'],
cascade: true,
remove: true
}),
require('css-mqpacker')()
]
}
}),
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
})
] |
|
Thanks @renarsvilnis , seems to be working! On to the next issue now :D |
|
I previously used loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
include: PATHS.src
},
{
test: /\.pcss$/,
loaders: [
'style-loader',
'css-loader?importLoaders=1',
'postcss-loader'
]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}
]What should I use now if I want to extract all my styles using the ExtractTextPlugin? |
|
this was frustrating to me, I was trying to be more up to date on the syntax and it failed! glad I found this. |
|
I ran into this exact problem using webpack2 (v2.2.0-rc.1) when trying apply the |
|
@quantuminformation |
|
@domeknn way too cryptic for me mate ;) |
|
I came across this issue today when I tried to upgrade to webpack2. For me the following change (tmair@1414036) fixed the issue I was having, I am just not sure if it is the correct fix for the issues I am experiencing |
webpack 2 is in release candidate and this is still not fixed. Just a friendly reminder! |
|
Using the fix provided by @tmair works perfect for me at the moment. been scratching my head all day with this when migrating |
|
Using @tmair's change to return loader objects from
See nwb output
rules: [{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallbackLoader: {loader: 'style-loader'},
loader: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: [autoprefixer()]
}
},
{
loader: 'stylus-loader',
options: {
use: [nib()],
import: ['~nib/lib/nib/index.styl']
}
}
]
})
}]Edit: as of Webpack 2.2.1 you don't need to use |
leads to |
|
I can now get through with this:
|
…d rule attributes 'loader' and 'query' instead of 'use' and 'options'. See webpack-contrib/extract-text-webpack-plugin#282 (comment) and webpack-contrib/extract-text-webpack-plugin#265 (comment)
|
Hm... could it be that there is an issue with the sass-loader? |
|
Hmm it seems like the loader/string query syntax works but the use/js syntax doesn't. @michael-ciniawsky do you know if someone is already working on it? I would like to help but the status of the upgrade to webpack2 is unclear :/ |
|
Ah nice, i've just tested it with my project, works great! |
|
Resolved with https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v2.0.0-rc.0 & published to npm. |
|
@d3viant0ne I can confirm this worked with webpack 2.2.0. ( was not with wepack 2.1.0-beta.26) |
|
I have been breaking my head to fix this issue and I can confirm this format worked |
|
Can someone add an example to the README on how to specify options to a loader in the list of loaders passed to the ExtractTextPlugin in webpack 2+? I'm still not clear on the syntax ("use" vs. "loader" and "options" vs. "query"). |
|
@thallada i've tried the following with success: |
|
@thallada - Could you please open a new issue so this can get properly documented as there is an obvious gap. Your requests stands a really good chance of getting lost in the black hole that is old / closed issues. |
|
Hello, I'm too fighting with webpack 2 the past couple of days. I'm new to webpack, so it's even more fun :). I've made an webpack 2 starter pack which I want to use in the future (angular, bootstrap, sass etc.). It is working fine (after some learning by trial and error and then some more of the same) I made a push into my github repo. After that, just to make sure everything works I cloned (couple minutes later) the same repo, ran I checked everything, I'm running the same node, npm and webpack version, and everything else is the same. So I now have two identical webpack projects, from which one isn't working. The first The second `webpack.config.js`` file (I cloned from github) If I try and rewrite the first I'm working with webpack the past 3 days, so I'm all the time at the newest version of webpack 2.2.1. |
|
@K1pavic i think you might want to use the json syntax rather than the string syntax: into: |
|
I can't for the life of me work out why this config isn't working. I've read through all this thread (and many others!) but no joy. My config for ExtractTextPlugin is using the recommended syntax as far as I can see, but still not giving me any results. Any help would be much appreciated! :) |
|
Hello, I don't have much time at the moment, tommorow will be better, but
what I saw at the first glance ist that you miss some stuff in the
ExtractTextPlugin format, like this:
plugins: [
new ExtractTextPlugin({ filename: "bundle.css" }),
]For more examples you can use my working tempalte at
https://github.com/K1pavic/Webpack-starter
Hope it helps.
Kristian
2017-06-25 17:57 GMT+02:00 Conor Doyle <[email protected]>:
… I can't for the life of me work out why this config isn't working. I've
read through all this thread (any many others!) but no joy. My config for
ExtractTextPlugin is using the recommended syntax as far as I can see, but
still not giving me any results. Any help would be much appreciated! :)
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './dev/js/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
import: false,
importLoaders: 1,
minimize: false,
sourceMap: true,
url: false,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
}),
},
],
},
plugins: [
new ExtractTextPlugin('styles.css'),
],
};
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#265 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AKwP26qhRGwPapo9zEIpM62AjoDMQr1aks5sHoNSgaJpZM4KQkJc>
.
--
*Kristian Pavić**, **MSc in Computer Science*
Faculty of Electrical Engineering Osijek
*Phone:+4915255793267*
*E-mail: [email protected] <[email protected]>*
|
|
@K1pavic Greatly appreciate your help on a Sunday Kristian, but ExtractTextPlugin now takes either an object or the name of the result file. So... is equivalent to... ...so that's not the problem. Guess I'll keep hacking about and hopefully figure it out eventually - story of my life! :) |
|
Glad to help :)
Like I said, you can try and use the project I put on Github, there
everything should work just fine. You can remove the angular and bootstrap
stuff if you don't need it.
If you don't make any progress to monday afternoon I can take a better look.
Good luck
Kristian
2017-06-25 18:55 GMT+02:00 Conor Doyle <[email protected]>:
… @K1pavic <https://github.com/k1pavic> Greatly appreciate your help on a
Sunday Kristian, but ExtractTextPlugin now takes either an object or the
name of the result file. So...
plugins: [
new ExtractTextPlugin({
filename: 'styles.css'
})
]
is equivalent to...
plugins: [
new ExtractTextPlugin('styles.css')
]
...so that's not the problem. Guess I'll keep hacking about and hopefully
figure it out eventually - story of my life! :)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#265 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AKwP24V-3F_Ky4Ht7YKhYDK1LwaLmfSQks5sHpDxgaJpZM4KQkJc>
.
--
*Kristian Pavić**, **MSc in Computer Science*
Faculty of Electrical Engineering Osijek
*Phone:+4915255793267*
*E-mail: [email protected] <[email protected]>*
|
and others
Syntax here should be updated too?
https://github.com/webpack/webpack.js.org/blob/develop/content/how-to/upgrade-from-webpack-1.md#moduleloaders-is-now-modulerules
The text was updated successfully, but these errors were encountered: