我在main.js中引入了一个scss文件,其中包含了scss变量、mixin混合和其他的一些公共样式,但是编译的时候报错了:Error: Undefined mixin.

在网上查阅资料后,我在vite.config.js中加入了css预编译的代码:

export default defineConfig({
  plugins: [vue()],
  css: {
    // 预编译
    preprocessorOptions: {
      scss: {
        // 支持全局scss变量
        additionalData: '@import "./src/css/index.scss";',
      },
    },
  },
})

但是又报错了:Error: This file is already being loaded.

就是index.scss文件不需要写两个地方,把main.js中的去掉就可以成功编译了。

然后我又试了一下,如果index.scss中只包含普通样式,不包含混合、变量、函数等,那么直接在main.js中引入也是没问题的。

更多推荐