关于webpack:scss中export-无效问题

58次阅读

共计 830 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完