scss中:export|scss中:export 无效问题 scss中:export无效问题

在scss中

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

【scss中:export|scss中:export 无效问题】在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...
希望对你有所帮助