@use rules must be written before any other rules 报错

最新推荐文章于 2025-03-31 23:09:05 发布

xunloveo

最新推荐文章于 2025-03-31 23:09:05 发布

阅读量1.1w

点赞数 8

分类专栏：打包工具 element-ui 文章标签： elementui scss

本文链接：https://blog.csdn.net/xunloveo/article/details/119598288

版权

element-ui 同时被 2 个专栏收录

2 篇文章

订阅专栏

打包工具

1 篇文章

订阅专栏

这篇博客介绍了在Vue项目中使用Element-Plus按需加载样式时遇到的CSS预处理器错误`@use rules must be written before any other rules`。作者提供了一个解决方案，即通过修改`preprocessorOptions`的`scss`配置，将`additionalData`改为`@use`语法，从而避免了冲突。这有助于优化项目构建并确保样式正确导入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: name => {
            name = name.slice(3)
            return `element-plus/packages/theme-chalk/src/${name}.scss`
          },
          resolveComponent: name => {
            return `element-plus/lib/${name}`
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/theme/var.scss";`,
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve('src'),
    },
  },
})

使用了element-plus按需加载样式然后使用css.preprocessorOptions一起使用报错@use rules must be written before any other rules

解决方案如下：

modules.exports = {
    ...    
    css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@use "@/theme/var.scss" as *;`,
          },
        },
    },
    ...
}