Vue3——集成 sass

安装 sass

npm install sass sass-loader -D

使用 scss 语法！！！需要加上 lang="scss"

<style scoped lang="scss"></style>

添加一些全局的样式

在 src/styles 目录下创建一个 index.scss 文件，当然项目中需要用到清除默认样式，因此在 index.scss 引入 reset.scss

// 引入清除默认样式
@import "./reset.scss";

在入口文件引入main.ts

// 引入模板的全局的样式
import "@/styles/index.scss";

在 style/variable.scss 创建一个 variable.scss 全局变量文件！

它的作用是定义一些常用的变量，例如颜色、字体、尺寸等，然后在其他的样式文件中引用这些变量，以实现样式的复用和统一。

在 vite.config.ts 文件配置如下:

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
        // 这里可以配置sass的选项，例如全局变量、函数等
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}

@import "./src/styles/variable.less";后面的;不要忘记，不然会报错!