ionic4 全局样式文件路径配置

ionic4 全局样式文件路径配置

从ionic3 升级到ionic4 后会遇到之前定义的全局样式和样式函数无法正确使用的问题，需要在每一个引用的地方把 variables.css文件引入进去。如果碰到文件层级较深，又恰巧碰到重构，那改动就有点儿多了，而且很容易出错。恰巧我都遇到了，实在难以忍受，遂针对这个找了些资料，圆满解决。

在angular.json文件中，找到如下结构:

projects->app>architect>build->options

如果没有错的话，原有的文件应该是这样:

  "projects": {
    "app": {
      略过...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             略过....
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },

我们需要在styles这一级加入angular的 stylePreprocessorOptions

"stylePreprocessorOptions": {
  "includePaths": ["src/theme"]
},

现在angular.json文件是这个样子：

 "projects": {
    "app": {
      略过...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             略过....
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["src/theme"]
            },
            "scripts": []
          },

使用对比：

// src/app/app.component.scss
// 手术前
@import '../style-paths/variables';
// 手术后
@import 'variables';

是不是清爽很多了，是不是又觉得我行了？赶紧安排起来~~~

参考资料：https://angular.io/guide/workspace-config#style-script-config