vue.config.js 设置requireModuleExtension属性后样式不生效

  • 编译的时候总提示modules属性已失效,请替换为requireModuleExtension,修改之后:`
css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        //extract: false,

        // 是否开启 CSS source map?
        sourceMap: false,

        // 为预处理器的 loader 传递自定义选项。比如传递给
        // sass-loader 时,使用 `{ sass: { ... } }`。
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/common.scss";`,
            },
        },
        // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        // 这个选项不会影响 `*.vue` 文件。
  
        requireModuleExtension: true,
    }

注:之前是设置的modules:false*,认为替换为requireModuleExtension:false重启发现element的样式都失效了,去看vue-cli文档才知道两个属性的值是相反的。

Vue 项目的配置中,如果使用的是 Vue CLI 4.0 及以上版本,在 `vue.config.js` 中直接配置 `css.requireModuleExtension` 选项会导致报错: ```bash ERROR Invalid options in vue.config.js: 'css.requireModuleExtension' is not allowed ``` 这是因为从 Vue CLI 4.0 开始,对 `vue.config.js` 的配置项进行了限制,部分旧版本的配置方式不再被支持。`requireModuleExtension` 已被移除,取而代之的是通过 CSS Modules 的默认行为进行控制[^4]。 ### 解决方案 若希望启用 CSS Modules 并避免该错误,应使用 `vue.config.js` 中的 `css.modules` 配置项来替代 `requireModuleExtension`: ```js module.exports = { css: { modules: { // 启用 CSS Modules auto: true, // 自定义生成的类名格式(可选) localIdentName: '[name]_[local]_[hash:base64:5]' }, loaderOptions: { // 可以在此处配置预处理器选项,如 sass、less 等 } } } ``` 上述配置表示自动为 `.module.css` 或类似命名的文件启用 CSS Modules 功能,而无需手动设置 `requireModuleExtension`。如果项目中使用了 SCSS 或 LESS,可以在 `loaderOptions` 中添加对应的配置[^4]。 --- ### 示例代码 以下是一个完整的 `vue.config.js` 示例,包含 SCSS 预设器和 CSS Modules 支持: ```js module.exports = { css: { modules: { auto: true, localIdentName: '[name]_[local]_[hash:base64:5]' }, loaderOptions: { scss: { additionalData: '@import "@/styles/variables.scss";' } } } } ``` 此配置将确保项目能够正确解析带有模块化的 CSS 文件,并支持 SCSS 的全局变量引入。 --- ### 注意事项 - 不要在 `vue.config.js` 中直接使用 `plugins` 或 `requireModuleExtension` 等已被弃用的字段,这会导致配置校验失败。 - 如果需要自定义 Babel 或 PostCSS 行为,应使用专门的配置文件(如 `babel.config.js` 或 `postcss.config.js`)而不是 `vue.config.js`。 ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值