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.
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 :Note that it is ok with css or sass or scss files. My problem is with styles in js files.