inscss$red:#C03639;$green:#30B08F;$yellow:#FEC171;:export{red:$red;绿色：$绿色；yellow:$yellow;}inimportstylesinjsfrom'./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模块，https://vitejs.cn/guide/featu...希望对你有帮助
