webpack5 css modules配置（scss导出变空对象）

webpack升级到5发现原先的 xx.scss 导出变量不能用了

   返回一个空对象，心中万马奔腾

import $style from '@/xxx/exportVariable.scss'
console.log( $style ) // {}

解决方法：

1、使用xx.module.scss 【推荐】

把原先的xx.scss 改成 xx.module.scss 就可以了

import $style from '@/xxx/exportVariable.module.scss'
console.log( $style ) // {colorPrimary: '#ff901b',....}

2、配置webpack启用modules

   大多数情况下我们推荐使用第一种方式，但是有引用第三方的一些库，如果没启用可以导致样式渲染异常

// vue.config.js
css: {
        modules: {
              auto: resourcePath => {
                return resourcePath.endsWith('xxx.scss')
            }
       }
 }

参考

webpack 官网
css-loader

创作、分享不易。收藏和点赞是最大的支持!