首先注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

然后在utils.js中添加, minimize:true

const cssLoader = {
   loader: 'css-loader',
   options: {
     sourceMap: options.sourceMap,
     minimize:true
   }
 }

最后在每个vue组件的<style scoped>添加scoped属性,避免多个vue文件打包,出现相同名称的修饰。因此需要命名尽量不一致,或者使用scoped

<style scoped>
</style>

vue css-loader vue项目css样式失效

Logo

前往低代码交流专区

更多推荐