I'm having these errors when bundling my app and I can't figure why it's not working. I was using style-loader before and now I'm trying to implement extract-text plugin but got these errors :
The thing is all of this was actually working with style-loader, I'm just replacing style-loader with extract plugin, not changing any other loader or plugin, and I searched but didn't found any solution.
vuetify.css can be found here https://github.com/vuetifyjs/vuetify/tree/master/dist
here is my index.scss :
@import "default";
@import "list";
@import "page";
@import "toolbar";
And here is part where I'm importing the files :
import 'vuetify/dist/vuetify.min.css';
import './sass/index.scss';
Webpack module config :
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'css-loader?url=false!sass-loader',
},
extractCSS: true,
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader!css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader?url=false!sass-loader',
fallback: 'style-loader!css-loader?url=false!sass-loader'
})
},
{
test: /\.(png|jpg|gif|svg|ttf|otf|eot|svg|woff(2)?)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
}
plugin config :
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
}
}),
new CleanWebpackPlugin([
getPath('../cordova/www/**'),
], {
root: getPath('..'),
}),
new CopyWebpackPlugin([{
from: getPath('../index.html'),
to: getPath('../cordova/www/index.html')
},
{
from: getPath('../assets'),
to: getPath('../cordova/www/assets/')
},
]),
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true
}),
new ExtractTextPlugin('styles.css')
],
Change /\.css$/
rule to this one.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}