This file is already being loaded.

[chaos-zhu]

Versions

nuxt-vite: 0.0.36 nuxt: 2.15.3 other:

    "@nuxtjs/style-resources": "^1.0.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "node-sass": "^5.0.0",
    "nuxt-vite": "0.0.36",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1"

Reproduction

ERROR  This file is already being loaded.   
  ╷
1 │ @import "~/assets/style/scss/global.scss";@import './variable.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  assets\style\scss\global.scss 1:9  root stylesheet

  ╷
  1 │ @import "~/assets/style/scss/global.scss";@import './variable.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Description

I'll make sure I only load it once, Configuration is as follows

css: ['./assets/style/reset.css'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          sourceMap: true,
          additionalData: '@import "~/assets/style/scss/global.scss";',
        },
      },
    },
  },
  ssr: false,
  styleResources: {},

// global.scss
@import './variable.scss';

html,
body {
  font-family: PingFangSC-Regular, PingFang SC;
  position: relative;
  z-index: 1;
  font-size: $base-font;
  background-color: $bk-color;
}

I refer to it, it doesn't solve the problem, #71

webpack is so slow，help me~~~/(ㄒoㄒ)/~~

[pqml]

Hi, you can fix it by using a callback function for additionalData

css: {
	preprocessorOptions: {
		scss: {
			additionalData (source, fp) {
				// All scss files ending with imports.scss
				// will not re-import additionalData
				if (fp.endsWith('imports.scss')) return source;
				
				// Use additionalData from legacy nuxt scss options
				return config.build.loaders.scss.additionalData + source;
			}
		}
	}
}

[chaos-zhu]

Hi, you can fix it by using a callback function for additionalData

css: {
	preprocessorOptions: {
		scss: {
			additionalData (source, fp) {
				// All scss files ending with imports.scss
				// will not re-import additionalData
				if (fp.endsWith('imports.scss')) return source;
				
				// Use additionalData from legacy nuxt scss options
				return config.build.loaders.scss.additionalData + source;
			}
		}
	}
}

What variable is config?

[pqml]

It's the full nuxt config object. I use this to share addionalConfiguration between nuxt-vite and "classic" webpack-based nuxt (used on build)

Here is a full configuration sample :

module.exports = async () => {
	const config = {
		build: {
			loaders: {
				scss: {
					additionalData: `
						@import "~/assets/styles/global.imports";
					`
				}
			}
		},

		vite: {
			css: {
				preprocessorOptions: {
					scss: {
						additionalData (source, fp) {
							// All scss files ending with imports.scss
							// will not re-import additionalData
							if (fp.endsWith('imports.scss')) return source;

							// Use additionalData from legacy nuxt scss options
							return config.build.loaders.scss.additionalData + source;
						}
					}
				}
			}
		}
	};

	return config;
};

[ghost]

any solution??

[FengLin2016]

nuxt.config.js

  vite : { 
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './')
      }
    },
    ssr: false,
    css : { 
        preprocessorOptions : { 
            scss : { 
                sourceMap : false , 
                // additionalData : `@import "@/assets/mixin.scss";`,
                additionalData (source, fp) {
                  // All scss files ending with imports.scss
                  // will not re-import additionalData
                  if (fp.endsWith('variables.scss')) return source;
                  // Use additionalData from legacy nuxt scss options
                  return `@import "@/assets/mixin.scss"; ${source}`
                } 
            } , 
        } , 
    } ,  
 } ,

Because this preprocessing will also process the current file, it will report an error that it has been loaded! The solution is to exclude the file itself