css文件的 处理有问题

Question

{
test: /.styl/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
{
loader: ‘postcss-loader’,
options: {
sourceMap: true
}
},
‘stylus-loader’
]
}

然后运行

npm run dev:server

server is listening on 0.0.0.0
./client/app.vue?vue&type=style&index=0&id=7752612a&lang=stylus&scoped=true& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–5-2!./node_modules/stylus-loader!./node_modules/vue-loader/lib??vue-loader-options!./client/app.vue?vue&type=style&index=0&id=7752612a&lang=stylus&scoped=true&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[NS] is not a function
at childCompiler.runAsChild (/Users/achilles/yilong/todo/node_modules/mini-css-extract-plugin/dist/loader.js:148:15)

后来又修改为：

plugins: defaultPluins.concat([
new webpack.DefinePlugin({
“process.env.NODE_ENV”: JSON.stringify(JSON.stringify(process.env.NODE_ENV || ‘development’)),
“process.env.VUE_ENV”: ‘“server”’
}),
new VueServerPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: ‘[name].[hash].css’,
chunkFilename: ‘[id].[hash].css’
})
//new webpack.HotModuleReplacementPlugin()
// new webpack.NoEmitOnErrorsPlugin()
])
也还是没又样式。。。

Answer 1

Jokcy 2018-10-24 17:51:32

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73#issuecomment-380510188

• 提问者 旋涡鸣人_ #1

  new MiniCssExtractPlugin(), 插件里面加了这个就没报错了，可是样式还是为空  （context.renderStyles()）

• 提问者 旋涡鸣人_ #2

  @jokcy 老师 因为我用的webpack4+版本
  
  minicss 这个 操作 似乎不支持：
  
  this plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

• 提问者 旋涡鸣人_ #3

  https://webpack.js.org/plugins/mini-css-extract-plugin/
  
  下面的说明里面有。。。我该咋弄啊。。。继续不下去

点开查看后面1条评论