引入全局样式优先级会低于elementPlus，有什么方法可以解决吗，在nuxt2的时候不会这样子

[Loser1027]

[wkl007]

有同样的问题。

[zndle]

试下这样：

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/assets/scss/element.scss',
    '@/assets/scss/index.scss', // 这里就是你定义的样式
    '--other styles --',
  ],
  vite: {
    // css: {
    //   preprocessorOptions: {
    //     scss: {
    //       additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
    //     },
    //   },
    // },
  },
  modules: ["@element-plus/nuxt"],
  elementPlus: {
    importStyle: false,  // 不用插件导入样式
  },
});

而在 element.scss 里，你可以这样写：

$-colors: (
    'primary': ('base': rgba(107, 33, 168, 1),
    ),
    'success': ('base': #67c23a,
    ),
    'warning': ('base': #e6a23c,
    ),
    'danger': ('base': #f56c6c,
    ),
    'error': ('base': #f56c6c,
    ),
    'info': ('base': #909399,
    ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: $-colors);

@import 'element-plus/theme-chalk/src/index.scss';

[yanhoor]

试下这样：

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/assets/scss/element.scss',
    '@/assets/scss/index.scss', // 这里就是你定义的样式
    '--other styles --',
  ],
  vite: {
    // css: {
    //   preprocessorOptions: {
    //     scss: {
    //       additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
    //     },
    //   },
    // },
  },
  modules: ["@element-plus/nuxt"],
  elementPlus: {
    importStyle: false,  // 不用插件导入样式
  },
});

而在 element.scss 里，你可以这样写：

$-colors: (
    'primary': ('base': rgba(107, 33, 168, 1),
    ),
    'success': ('base': #67c23a,
    ),
    'warning': ('base': #e6a23c,
    ),
    'danger': ('base': #f56c6c,
    ),
    'error': ('base': #f56c6c,
    ),
    'info': ('base': #909399,
    ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: $-colors);

@import 'element-plus/theme-chalk/src/index.scss';

这样引入全部样式然后怎么去掉未使用的样式呢，@fullhuman/postcss-purgecss 好像用不了

[zndle]

试下这样：

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/assets/scss/element.scss',
    '@/assets/scss/index.scss', // 这里就是你定义的样式
    '--other styles --',
  ],
  vite: {
    // css: {
    //   preprocessorOptions: {
    //     scss: {
    //       additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
    //     },
    //   },
    // },
  },
  modules: ["@element-plus/nuxt"],
  elementPlus: {
    importStyle: false,  // 不用插件导入样式
  },
});

而在 element.scss 里，你可以这样写：

$-colors: (
    'primary': ('base': rgba(107, 33, 168, 1),
    ),
    'success': ('base': #67c23a,
    ),
    'warning': ('base': #e6a23c,
    ),
    'danger': ('base': #f56c6c,
    ),
    'error': ('base': #f56c6c,
    ),
    'info': ('base': #909399,
    ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: $-colors);

@import 'element-plus/theme-chalk/src/index.scss';

这样引入全部样式然后怎么去掉未使用的样式呢，@fullhuman/postcss-purgecss 好像用不了

...那这样：建一个 BaseApp.vue 的组件（刚好用来放置全局的 <el-config-provider>) ，用于包裹所有的 layouts 。然后就不要在 nuxt.config.ts 中引入样式。在它的 <style> 引入自定义的样式:

<!-- ... 其它内容....-->
<style lang="scss">
@import '~/assets/scss/custom.scss';

</style>

嘿嘿，办法总比困难多。

[yanhoor]

试下这样：

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/assets/scss/element.scss',
    '@/assets/scss/index.scss', // 这里就是你定义的样式
    '--other styles --',
  ],
  vite: {
    // css: {
    //   preprocessorOptions: {
    //     scss: {
    //       additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
    //     },
    //   },
    // },
  },
  modules: ["@element-plus/nuxt"],
  elementPlus: {
    importStyle: false,  // 不用插件导入样式
  },
});

而在 element.scss 里，你可以这样写：

$-colors: (
    'primary': ('base': rgba(107, 33, 168, 1),
    ),
    'success': ('base': #67c23a,
    ),
    'warning': ('base': #e6a23c,
    ),
    'danger': ('base': #f56c6c,
    ),
    'error': ('base': #f56c6c,
    ),
    'info': ('base': #909399,
    ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: $-colors);

@import 'element-plus/theme-chalk/src/index.scss';

这样引入全部样式然后怎么去掉未使用的样式呢，@fullhuman/postcss-purgecss 好像用不了

...那这样：建一个 BaseApp.vue 的组件（刚好用来放置全局的 <el-config-provider>) ，用于包裹所有的 layouts 。然后就不要在 nuxt.config.ts 中引入样式。在它的 <style> 引入自定义的样式:

<!-- ... 其它内容....-->
<style lang="scss">
@import '~/assets/scss/custom.scss';

</style>

嘿嘿，办法总比困难多。

这样就会有这个优先级的问题了

[zndle]

你是不是搞错了，这样就解决了 引用顺序的问题啊~

➜  nuxt-boilerplate git:(element-plus) ✗ tree assets
assets
└── scss
    ├── another.css
    ├── element-plus
    │   ├── dark.scss
    │   └── index.scss
    └── qing-shan
        └── index.scss

4 directories, 4 files

再 another.css 里：

.el-button {
    color: green;
}

components/base/App.vue

<script setup lang="ts"></script>

<template>
  <section>
    <el-config-provider>
      <slot></slot>
    </el-config-provider>
  </section>
</template>

<style lang="scss">
@import '~/assets/scss/another.css';
</style>

然后最后的结果:

自定义组件的 css 会最后加载，没问题啊~