在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...
心愿对你有所帮忙