-
Notifications
You must be signed in to change notification settings - Fork 513
How to properly use multiple loaders with this plugin? #330
Comments
Linking my related SO (it's using LESS tho): http://stackoverflow.com/questions/41554983/using-extracttextplugin-with-webpack-2-2-0-rc3-throws-errors My SO question includes a repro sample to be able to investigate this: https://dl.dropboxusercontent.com/u/87239305/webpack-less.zip Steps to reproduce:
I've also added a second config file which is working, without ExtractTextPlugin:
|
Running into this same issue as well. Same setup as @frederikprijck just without the |
I also am having those issues trying to load less files. |
I was running in to a similar issue when moving to webpack 2 from 1, and I found: http://stackoverflow.com/questions/41021614/webpack-2-css-modules-support Keeping my css-loader line the same as what I had in webpack 1 worked. My rule now looks like:
|
@415DomSmith Thanks a lot! You saved me! |
@415DomSmith's solution worked for me. It appears {
test: /\.(scss)$/,
include: [path.join(__dirname, 'src')],
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{ loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: "[path]___[name]__[local]___[hash:base64:5]" },
{ loader: 'sass-loader' }
]
})
} It might also make sense to change/alias the |
passing in options into the sass-loader through query params solved this for me: modules: {
rules: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract([
'css-loader', 'sass-loader?includePaths=./node_modules/compass-mixins/lib'
])
}
]
} webpack 2.2.0-rc.6 |
I have no idea why, but @dylanjha 's format above with no fallback loader was the only way I could get it to work. Definitely some rough edges here that need fixed up. Spent half a day of trial and error on this one. :( |
This plugin doesn't support Webpack v2 yet, here is the milestone. |
@jaydenseric That's not correct. The
@TheLarkInn confirmed it was a problem with ExtractTextPlugin and should have been fixed with the latest release: https://github.com/webpack/extract-text-webpack-plugin/releases/tag/v2.0.0-beta.5 (I still have to verify this myself tho.) Link to the twitter conversation with him regarding this issue: https://twitter.com/TheLarkInn/status/818868861000962048 |
I verified my reproduce app mentioned above (#330 (comment)) is working when upgrading ETP to
Aswell as using the following syntax
This is not 100% according to the readme, but that should be fixed once #341 get's merged. @xeho91 can you verify this works for u ? |
@frederikprijck, do you have an example for when we want to use plugins as well? Say I want to use |
@cascornelissen the you also have to add this to the
It's also in my reproduction example #330 (comment) |
Ah, didn't know about the Edit: seems like you can just
|
With regards to postcss plugins specifically. You can also provide a postcss.config.js file at your project root that get's picked up by postcss-loader.
https://github.com/michael-ciniawsky/postcss-load-config |
I got it to work in webpack 2.0 with the following syntax: {
test: /\.s[ac]ss$/,
use: [
'to-string-loader',
ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader?-url&sourceMap',
'postcss-loader',
'sass-loader?sourceMap'
]
})
],
exclude: [
root('node_modules')
]
} notice I had to add the "to-string-loader" to get it to work. |
I got it to work with Webpack 2, PostCSS (with postcss-import, postcss-cssnext and postcss-reporter plugins) and sourcemaps: |
I wish I would have read @415DomSmith comment more carefully earlier on, would have saved me a few hours. I had the syntax inside of the Just to clarify, this does NOT work: {
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
})
} This DOES work: {
test: /\.s[ac]ss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
})
} @kb3eua If you change use to loader in your example you should be able to remove the to-string-loader. As I understand it ExtractTextPlugin.extract takes the options and returns a string based on the old |
Nice catch @Ephem . I've modified my reproduction sample (webpack-less.zip) and It idd fails when using Monkeypatching PR #343 (as mentioned by @Ephem below) solved the problem. So I'm excited to see #343 getting merged in! |
Returning an array instead of a string so that |
@xeho91 Can you update to rc0? Please note that you have to |
@xeho91 Any news on this? This is a blocking final release. A standalone project to study would be ideal. Note that |
@bebraw To me it's working. But well, I didn't file the issue so I guess that doesn't matter. But I did solve my reproduction sample mentioned previously (#330 (comment)). To summarize, I'm succesfully using the following versions:
Together with the following configuration:
and
|
@frederikprijck Ok, excellent to hear. Often it's hard to work with issues like this as the information tends to be partial (not much to work with), but still cool. 👍 |
I have tried multiple variations to get chained loaders to get to work with this plugin. I have tried all the examples in this thread and nothing seems to work.
here is my simple configuration:
with plugins looking like:
I execute webpack and it seems to compile successfully, but the |
@nryoung I would need a project to study to say anything concrete. Based on your description alone I can't see how you refer to CSS in your code. |
@nryoung with this bit of code it's difficult to tell what the issue is. Are you using |
@bebraw @dylanjha Thanks for the replies. I went back and looked at my entry point file and realized it was basically a global include for all of my other sass modules. I added this to
Notice the |
Sorry, I was away for a few weeks. I'm currently using following versions: and the code for this plugin I've got right now (sorry, I don't have the older - the one which was used to report this issue):
And it works perfectly. However using 'use' as mentioned before like this:
didn't work. |
|
Not working for me : {
test: /\.(scss|sass)$/,
loader: ExtractTextPlugin.extract(scssLoader),
include: [__dirname]
}
...
plugins: [
new ExtractTextPlugin("app.bundle.css")
], My package.json : https://gist.github.com/jy95/99377c113252e6baaa23087abe859814 Any idea ? I become mad with this bug for hours |
It's really working with Packages: webpack - 3.5.6, extract-text-webpack-plugin - 3.0.0.
Also I've tested this with code splitting and webpack pushes all the css imports to the style tag as expected. |
For webpack 3 this fixed the issue:
|
Apparently for Webpack |
Hello!
I am using webpack@2.2.0-rc3
and extract-text-webpack-plugin@2.0.0-beta.4
I am trying to configure this plugin to extract multiple loaders (start with sass, end with css).
The piece of configuration code in my
webpack.config.js
looks like this:I am getting errors output in terminal. The first one looks like this and the rest are similar to this one:
I tried several possible ways to make it work. Everytime the same error output.
After some hours of struggling with it I found the only setup which worked so far:
However as you could probably have guessed, the result isn't what I excepted to have.
It bundles every stylesheets in folder to one file, which makes a heavy css file from it.
I've followed documentation, tried setup from webpack version 1 and nothing worked so far.
I believe I could have missed something, since I am still a beginner that's why I seek for a help here and I hope to get an advise in case I missed something important.
Also I found out that on gitter webpack chat someone was struggling with same problem as me and got same error output, so naturally I started to think that it could be a bug and I decided to report it.
The text was updated successfully, but these errors were encountered: