scss中:export 无效问题

在scss中

$red:#C03639;
$green: #30B08F;
$yellow:#FEC171;
:export {
  red: $red;
  green: $green;
  yellow: $yellow;
}

在js中

import styles from './var.scss';
console.log(styles) // {red: '#C03639', green: '#30B08F', yellow: '#FEC171'}

这几天学习到在js中引入scss/less变量的操作,但是自己在js中获取为空,查了很多,没有正确解决方案,肝掉不少头发后,总算找到问题:
主要原因是mini-css-extract-plugin和vue-style-loader同时存在时候,会出现这个问题,引入mini-css-extract-plugin 时候,需要去掉vue-style-loader,目前没有发现去掉vue-style-loader 后有什么问题
如果直接使用vue-cli4 创建项目,不会存在这个问题,vue-cli 已经做了相应处理,源码为:

if (shouldExtract) {
  rule
    .use('extract-css-loader')
    .loader(require('mini-css-extract-plugin').loader)
    .options({
      hmr: !isProd,
      publicPath: cssPublicPath
    })
} else {
  rule
    .use('vue-style-loader')
    .loader(require.resolve('vue-style-loader'))
    .options({
      sourceMap,
      shadowMode
    })
}

还有个 按照名称为.module.scss的可以处理的,这个是vite 打包时候有效,使用webpack 不行,具体的可以参考vite的文档css module,https://vitejs.cn/guide/featu...
希望对你有所帮助

你可能感兴趣的:(scss中:export 无效问题)