warning: "@charset" must be the first rule in the file

[jzs11]

It is in the first rule of generated css file.

[wenmin92]

import your own css in the js entry, not in the html entry.

[jzs11]

Thanks for the suggestion, I have moved all my css import from html into js, and it is still the same. F.y.i

[wenmin92]

And put it after any other css lib import statement.

[AprilTong]

Waiting for an answer online.

[onlywhite]

When I used the Element-Plus CSS, I also encountered the same problem and i build project spent more than 1000 seconds, Waiting for an answer online. I found a similar issue

[atoji0]

same #5519

vite.config:
css: { preprocessorOptions: { css: { charset: false } } }

[jzs11]

I believe there is a regression in vite 2.7.0+

[mariusa]

tried 2.6.0, gives the same output.

2.5.0 gives only one warning, not 100. Regardless if this is in config or not:
css: { preprocessorOptions: { scss: { charset: false } } }

[jzs11]

Give it a try on 2.6.14, that's the version everything works perfectly for me.

[agileago]

same problem

[mariusa]

#6333

[agileago]

css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ]
    }
}

[xiangqunXiao]

css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ]
    }
}

how to apply while in rc or yml config file?

[Remigius2011]

in vite.config.js, e.g.:

export default defineConfig({
  // other stuff...
  css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'internal:charset-removal',
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === 'charset') {
                atRule.remove();
              }
            }
          }
        }
      ]
    }
  }
  // other stuff...
})

[wangrongding]

TQ~

[kinoli]

This worked for me.

css: {
    preprocessorOptions: {
      scss: {
        charset: false,
      },
    },
  },