webpack4 引入stylus 和css, build后.styl文件没有提取出来
index.js
import './index.styl' 打包后,没有提取到app.[hash:8].css里
import './main.css' // main.css 正常
webpack.config.prod.js
module.exports = merge(webpackCommon, {
module: {
rules: [
{
test: /\.css$/,
use: ExtractPlugin.extract({
fallback: "style-loader",
use: [
'css-loader'
]
})
},
{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
},
},
'stylus-loader'
]
})
}
]
},
plugins: [
// 略...
new ExtractPlugin('app.[hash:8].css')
]
}
但是webpack.config.dev.js, 开发环境时,.styl的样式是正常被插入到index.html的head里
module.exports = merge(webpackCommon, {
// 略...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
// 这里postcss直接使用stylus编译后的tree进行编译,提高效率
sourceMap: true,
}
},
'stylus-loader']
}
]
},
plugins: [
// 略...
]
})
index.styl

main.css

npm run build后生成单独的文件app.hash.css

npm run dev

谢邀~问题是否解决?
可能是提取插件
ExtractPlugin
版本的问题。