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

项目中咱们会定义不少全局变量（以下），为了更好的代码复用，避免写面条代码。css

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

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

方法1

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

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

方法2

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

vue 2.x 配置以下github

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

vue 3.x 配置以下,能够参考 vue-cli3配置web

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

注意事项

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

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

参考连接

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

vueschool.io/articles/vu…bash