VUE3项目--集成Sass

用户93816912553602025-11-26 13:46

项目中集成Sass后，在组件内部就可以使用sass样式，需要加上lang="scss"。

一、安装Sass

pnpm install sass（或者sass-embedded） sass-loader -D

二、添加全局样式

src文件夹下新建文件/styles/index.scss
在src/styles下文件文件reset.scss，目的是清除默认样式。复制npm官网的reset.scss文件内容到该文件中。
在index.scss中引入reset.scss文件。

@use './reset.scss';

在src/styles下文件文件variable.scss，目的是定义全局样式变量。变量名称以$开头。

php 复制代码

// variable.scss

$color: red;
$base-size: 10

在入口文件main.ts中导入样式文件。

arduino 复制代码

// main.ts

// 引入全局样式
import '@/styles/index.scss'

在vite.config.ts文件中配置scss。

php 复制代码

// vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/styles/variable" as *;'
      }
    }
  }
})

三、使用全局样式

上面定义了两个全局样式 <math xmlns="http://www.w3.org/1998/Math/MathML"> c o l o r 、 color、 </math>color、base-size，直接在组件中使用即可。

css 复制代码

<style scoped lang="scss">
div {
  h1 {
    // 使用全局样式变量$color
    color: $color;
  }
}
</style>