vue项目中如何全局引入scss/sass文件

SCSS全局变量引入技巧

最新推荐文章于 2024-04-29 17:17:37 发布

转载最新推荐文章于 2024-04-29 17:17:37 发布 · 4.1k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cadee016fb9a068b03750a0

文章标签：

#javascript #webpack #ViewUI

本文探讨了在项目中高效引入SCSS全局变量的方法，对比了直接在组件中引入和利用sass-loader特性两种方式，强调了代码复用与DRY原则的重要性。

项目中我们会定义很多全局变量（如下），为了更好的代码复用，避免写面条代码。

 - src
   - styles
     - _colors.scss
     - _fonts.scss
     - _mixins.scss
     ...
复制代码

问题的关键是怎么在我们的项目中引入这些文件。

方法1

<style lang="scss">
  @import "./styles/_colors.scss";
</style>
复制代码

在每个单文件组里引入上述代码。这个方法的缺点是，如果更改了文件的位置，你每个组件里的代码都得修改。当然你可以利用 webpack 的 alias 功能写成这种形式 @import "styles/_colors.scss"; 但万一修改了文件名呢，你还是得要一个个修改。其实这不符合DRY原则，没有做好代码复用。

方法2

可以利用sass-loader 的一个特性。可以将一段代码插入在每个scss文件头部。

vue 2.x 配置如下

    {
      loader: 'sass-loader',
      options: {
        data: `
          @import "@/styles/_colors.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
复制代码

vue 3.x 配置如下,可以参考 vue-cli3配置

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_colors.scss";`
      }
    }
  }
复制代码

注意事项

采用第二种方法的时候要注意因为它会在所有 sass 文件里添加相同的代码。如果添加的不是变量, mixin 之类的，而是类似下面的代码的话。假设你有20个scss文件的话，下面这段代码就会出现在你最终打包出来的文件20次。

.box {
	color: green;
}
复制代码

参考链接

css-tricks.com/how-to-impo…

vueschool.io/articles/vu…

转载于:https://juejin.im/post/5cadee016fb9a068b03750a0