Webpack does not include style from external package in Bundle
HamidOsouli-zz opened this issue · comments
I'm using vue js template for webpack.
In my main.js file, I imported external package like this :
import vSelect from 'vue-select';
and I want to extract styles into css files with extract-text-plugin but webpack does not include ( styles from external package that is in some.js file in node_modules ) into css file and instead it creates style tag in head.
What can I do to tell webpack to extract all styles in js files in node_modules.
Which loader I should be using ?
This is my webpack config :
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
})
},
{
test: /\.sass$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
})
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, './node_modules')],
},
},
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
Note that it is ok with css or sass or scss files.
My problem is with styles in js files.