vite项目sass变量找不到报错

报错内容如下：

[plugin:vite:css] [sass] Undefined variable.    ╷ 45 │ @for $i from 1 through length($size) {    │  

比如bkui-cli 或者vue-cli工程

module.exports = {
  appConfig() {
    return {
      indexPath,
      mainPath: './src/main.ts',
      publicPath: env.publicPath,
      outputDir: env.outputDir,
      assetsDir: env.assetsDir,
      minChunkSize: 10000,
      // pages: {
      //   main: {
      //     entry: './src/main.ts',
      //     filename: 'index.html'
      //   },
      // },
      // needSplitChunks: false,
      css: {
        loaderOptions: {
          scss: {
            additionalData: '@import "./src/style/variables.scss";',
          },
        },
      },

但是到vite项目就报错了

需要改为：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  css:{
    preprocessorOptions: {
      additionalData: '@import "./src/style/variables.scss";',
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      '@static': resolve(__dirname, './static'),
      '@charts': resolve(__dirname, './src/plugins/charts'),
      '@datasource': resolve(__dirname, './src/plugins/datasource'),
      '@modules': resolve(__dirname, './src/store/modules'),
    }
  }
})

这样就好了。

转载本站文章《vite项目sass变量找不到报错》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/vite/8898.html