• home > tools > Bundler > vite >

    vite项目sass变量找不到报错

    Author:zhoulujun Date:

    vite 项目sass报错,webpack是可以的。主要是全局变量造成的。

    报错内容如下:

    [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