是否有一些方法可以访问SASS/SCSS变量,而无需使用Angular-CLI在每个组件中导入它们

Question

我正在开发一个包含很多组件的项目.刚才我正在考虑使用SASS变量,但将变量导入每个现有组件可能会很烦人.也许有人知道有没有办法让SASS变量可以在项目中的所有*.scss文件中访问而无需导入它们.

Answer 1

截至目前,回答你的问题是' 不 '.我们必须在每个组件sass文件中导入variables和mixins文件.

angular-cli确实为添加paths/includePaths功能提供配置sass.为此,我们必须在app属性下添加以下配置.

"stylePreprocessorOptions": {
  "includePaths": [
    "style-paths"
  ]
}

使用上面的配置至少我们可以直接include按文件名文件,跳过如下的相对路径

@import 'variables';

有关参考,请参阅#3700和全局样式的文档.

Answer 2

要使用全局 scss，请将您的 scss 添加到 angular-cli.json

"apps": [
   {
   // ... 
  "styles": [
     "./src/style.scss"
  ]
   }
]

并在index.html中

<link rel="stylesheet" type="text/css" href="style.css">