如何在vite/vue3中使用其他组件的sass全局变量

Question

我想使用和更改其他组件的全局变量，我的文件结构如下所示......

我的变量位于 global.sass 文件中，但无法访问其他组件中的变量。

Answer 1

您需要设置配置文件vite.config.js：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/global.scss";`
    }
  }
},

另外对于本地字体，您可以在那里添加另一个配置，设置别名：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
},

然后使用它，例如：

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(@/assets/fonts/OpenSans-Bold.woff2) format('woff2');
}

Answer 2

一个新的 sass 模块系统

注意：Sass 团队不鼓励继续使用 @import 规则。Sass 将在未来几年内逐步淘汰它，并最终将其从语言中完全删除。更喜欢 @use 规则。（请注意，目前只有 Dart Sass 支持 @use。其他实现的用户必须使用 @import 规则。）

更多详情：这里

下面是当时全局scss最好的方法。

vite.config.js

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/_main.scss" as *;`,
      },
    },
  },
  plugins: [vue()],
});

样式/摘要/_colors.scss

$default: #000000;
$default-light: #333333;
$default-dark: #000000;

样式/摘要/index.scss

@forward './colors';
@forward ...

样式/_main.scss

@forward './abstracts';
@forward './components';
@forward './layouts';

src/index.scss => 不要忘记添加import "./index.scss"这个App.vue

@forward './styles/abstracts';
@use './styles/abstracts' as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: $font-primary;
  font-size: 1.6rem;
  line-height: 1.5;
  text-rendering: optimizespeed;
  color: $text;
  overflow-y: overlay;
}