Skip to content
文章目录

vite中使用sass

安装 sass

pnpm add sass

配置自定义全局 mixin

vite.config.ts

ts
import path from 'path'

function _resolve(dir: string) {
  return path.resolve(__dirname, dir)
}

export default ({ command, mode }: ConfigEnv): UserConfigExport => {
  const resultConfig: UserConfigExport = {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/scss/mixins.scss" as *;`,
        },
      },
    },
    resolve: {
      alias: {
        '@': _resolve('src'),
      },
    },
  }
  return resultConfig
}

特别注意事项

上面的配置,会让你能在SFC模板中直接使用@/assets/scss/mixins.scss文件中的 mixin,但手动在main.ts中引入的scss文件中,还是无法直接使用@/assets/scss/mixins.scss文件中的 mixin, 如果要在手动引入的scss文件中使用@/assets/scss/mixins.scss文件中的 mixin, 则需要在这些 scss 文件的头部加入

scss
@use './mixins.scss' as *;

// 通过上面方式引入了mixins.scss文件之后,这里面就能直接使用 mixins.scss 文件中的mixin了

关联文章

《sass 相关语法》