十、vue3+vite项目中引入sass

blue_121

已于 2023-07-25 17:31:38 修改

阅读量1.6k

点赞数

文章标签： sass 前端 css

于 2023-07-14 15:11:16 首次发布

本文链接：https://blog.csdn.net/blue_121/article/details/131723615

版权

文章介绍了如何在项目中使用SCSS样式，包括通过styleLint配置启用scss支持，引入reset.scss重置默认样式，以及设置全局变量。在src/styles创建index.scss文件并引入reset.scss，同时在vite.config.ts中配置额外数据导入全局变量文件variable.scss，使得组件能使用这些全局变量。

摘要由CSDN通过智能技术生成

我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候，项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法！！！需要加上lang="scss".

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

接下来我们为项目添加一些全局的样式

一，引入reset.scss

在src/styles目录下创建一个index.scss文件，

当然项目中需要用到清除默认样式,我们在npm官网中搜索,reset.scss,然后复制代码

因此在index.scss引入reset.scss

//清除默认样式
@import './reset.scss';

二，引入全局变量

在src/styles/index.scss全局样式文件中的全局变量是没有办法在组件中使用的.因此需要给项目中引入全局变量$.

在style/variable.scss创建一个variable.scss文件！

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

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },
})

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

配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了！！！