Angular 5中如何一次性导入SCSS文件实现全局复用？

嘿，我太懂你这种不想在每个组件SCSS里重复写一堆import语句的烦躁了！在Angular 5里确实有靠谱的办法，能一次性把mixins.scss、vars.scss这些文件全局注入，让所有组件SCSS都能直接用，不用再手动导入。下面给你两种实用方案：

方案一：通过主样式文件统一导入（最推荐） #

这是Angular CLI官方支持的方式，操作起来也最简单：

1. 创建一个主入口SCSS文件，比如项目根目录下的styles.scss，把所有需要全局复用的SCSS文件都导入进去：

// styles.scss
// 注意替换成你的文件实际路径，比如如果在src/styles文件夹下就写'./src/styles/vars.scss'
@import './vars.scss';
@import './mixins.scss';
@import './base.scss';

2. 修改angular-cli.json配置，找到apps数组里的styles属性，把这个主文件加进去（如果之前加过单个文件，记得替换成这个主文件）：

"apps": [
  {
    // ...其他配置项
    "styles": [
      "styles.scss"
    ]
  }
]

这样配置后，所有变量、混合宏、基础样式就会全局生效，你在任意组件的SCSS文件里直接用@include调用混合宏，或者使用变量都没问题，完全不用再写import语句。

方案二：用sass-resources-loader自动注入（适合复杂场景） #

如果你的项目需要确保每个SCSS文件（包括组件的）都能访问这些复用文件，或者方案一没满足需求，可以试试这个工具：

1. 安装依赖：

npm install sass-resources-loader --save-dev

2. 扩展Webpack配置：
   Angular 5默认隐藏了Webpack配置，你有两种方式修改：

   • 方式A：eject出Webpack配置（不推荐，一旦eject就没法回退）
     运行ng eject命令，然后在生成的webpack.config.js里找到处理SCSS的规则，添加sass-resources-loader的配置：

     module.exports = {
       module: {
         rules: [
           // 找到处理.scss的规则，添加下面的loader
           {
             test: /\.scss$/,
             use: [
               'raw-loader',
               'sass-loader',
               {
                 loader: 'sass-resources-loader',
                 options: {
                   // 填入你要全局注入的SCSS文件路径
                   resources: [
                     './src/vars.scss',
                     './src/mixins.scss'
                   ]
                 }
               }
             ]
           }
         ]
       }
     };
     

   • 方式B：用custom-webpack扩展配置（推荐）
     先安装适配Angular 5的自定义builder：

     npm install @angular-builders/custom-webpack@7 --save-dev
     

     然后修改angular-cli.json里的builder配置：

     "apps": [
       {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-webpack:browser",
             "options": {
               "customWebpackConfig": {
                 "path": "./webpack.custom.config.js"
               },
               // ...其他原有配置
             }
           }
         }
       }
     ]
     

     最后创建webpack.custom.config.js文件，写入配置：

     module.exports = {
       module: {
         rules: [
           {
             test: /\.scss$/,
             use: [
               {
                 loader: 'sass-resources-loader',
                 options: {
                   resources: [
                     './src/vars.scss',
                     './src/mixins.scss'
                   ]
                 }
               }
             ]
           }
         ]
       }
     };
     

为什么你之前直接加文件到angular-cli.json没用？ #

你之前尝试把单个SCSS文件直接加到styles数组里，这些文件会被编译成全局样式，但不会把里面的变量、混合宏暴露给其他SCSS文件——它们只是作为独立的样式文件注入页面，没法在组件SCSS里直接引用变量或混合宏。所以必须通过主文件统一导入，或者用sass-resources-loader把这些内容注入到每个SCSS的编译过程中。

内容的提问来源于stack exchange，提问作者Smokey Dawson