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了