vue-cli4打包mui.css之后，类名为什么会错乱

Question

先在main.js中引入mui.css：
import './assets/lib/mui/css/mui.css'
vue.config.js中，css相关配置如下：

css: {
        extract: true,
        sourceMap: false,
        loaderOptions: {},
        requireModuleExtension: false
  }

最后编译没有报错，但是在原有类名前后多了不明字符（如下图），导致样式失效，不知道是不是哪里配置出错了。本人小白，正在学习前端，网上搜不到答案，希望有大佬能够指点迷津。

Answer 1

requireModuleExtension:false改成true试下

Answer 2

这是我关于css这块的配置，你试下

// 配置高于chainWebpack中关于 css loader 的配置
css: {

    // 是否开启支持 foo.module.css 样式
    requireModuleExtension: true,
    
    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>     方式内联至 html 文件中
    extract: true,
    
    // 是否构建样式地图，false 将提高构建速度
    sourceMap: false,
    
    // css预设器配置项
    loaderOptions: {
        // 给 sass-loader 传递选项
        sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 \`src/variables.sass\` 这个文件
            // 注意：在 sass-loader v7 中，这个选项名是 "data"
            prependData: `@import "~@/variables.sass"`
        },

        // 给 less-loader 传递 Less.js 相关选项
        less:{
            // http://lesscss.org/usage/#less-options-strict-units `Global             Variables\`
            // `primary` is global variables fields name
            globalVars: {
                primary: '#fff'
            }
        }
    }
},