webpack4 引入stylus和css, npm run build后.styl文件没有提取出来
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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
谢邀~问题是否解决?
可能是提取插件
ExtractPlugin
版本的问题。