2023年7月3日发(作者：)

VueCLI4.0webpack配置属性——eModuleExtens。。。eModuleExtensionType:

booleanDefault:

true⽤途⽤于设定，是否只有

*.module.[ext] 结尾的⽂件才会被视作CSS Modules 模块。默认情况下，只有⽂件名中含有.modules的CSS相关⽂件还能使⽤CSS Modules。这⾥需要注意⼀点：如果我们进⾏了关于的配置。⼀定要在配置⽂件中显性的指出eModuleExtension的值。也就是说，我们⼀定要配置eModuleExtension。⽤法s = { publicPath: './', //

基本路径 outputDir: 'dist' //

输出⽂件⽬录 // css相关配置 css: { extract: false, //

是否使⽤css分离插件 ExtractTextPlugin sourceMap: true, //

开启 CSS source maps?

//

因为配置了,

尽管requireModuleExtension的值为默认值，我们也需要指出 requireModuleExtension: true, loaderOptions: { css: { //

注意：以下配置在 Vue CLI v4

与 v3

之间存在差异。 // Vue CLI v3

⽤户可参考 css-loader v1

⽂档 // /webpack-contrib/css-loader/tree/v1.0.1 modules: { localIdentName: '[local]_[hash:base64:8]' } } } }}附：如果你不了解CSS Modules，请查看本⼈关于CSS Modules拙作：OptionsType:

ObjectDefault:

{}⽤途⽤于向 CSS 相关的 loader 传递选项（设置）。相关的loader有：css-loaderpostcss-loadersass-loaderless-loaderstylus-loader当然，我们也可以通过chainWebpack⼿动去设置loader。当时，Options是官⽅推荐的⽅法。官⽅⽂档说明如下：这样做⽐使⽤

chainWebpack ⼿动指定 loader 更推荐，因为这些选项需要应⽤在使⽤了相应 loader 的多个地⽅。⽤法// s = { css: { loaderOptions: { //

这⾥的选项会传递给 css-loader css: { //

配置 CSS Modules

的class命名规则 modules: { localIdentName: '[local]_[hash:base64:8]' } }, //

这⾥的选项会传递给 postcss-loader postcss: { }, //

给 sass-loader

传递选项 sass: { // @/

是 src/

的别名 //

所以这⾥假设你有 `src/`

这个⽂件 //

注意：在 sass-loader v7

中，这个选项名是 "data" prependData: `@import "~@/"` }, //

默认情况下 `sass`

选项会同时对 `sass`

和 `scss`

语法同时⽣效 //

因为 `scss`

语法在内部也是由 sass-loader

处理的 //

但是在配置 `data`

选项的时候 // `scss`

语法会要求语句结尾必须有分号，`sass`

则要求必须没有分号 //

在这种情况下，我们可以使⽤ `scss`

选项，对 `scss`

语法进⾏单独配置 scss: { prependData: `@import "~@/";` }, //

给 less-loader

传递

相关选项 less:{ // /usage/#less-options-strict-units `Global Variables` // `primary` is global variables fields name globalVars: { primary: '#fff' } } } }}⽂章跳转上⼀篇：下⼀篇：