如何在 Angular 2 类中导入外部 SCSS答案

【问题标题】：How to import an external SCSS in Angular 2 class如何在 Angular 2 类中导入外部 SCSS
【发布时间】：2023-03-04 12:42:01
【问题描述】：

我必须使用在其他地方定义的 scss，才能在我的 @Injectable 类中使用

import { Injectable } from '@angular/core';

const customThemeRed = require('../../common/styles/custom/themes/custom-theme-red.scss');

@Injectable()
export class MyThemesService {
    constructor() {
        console.log('customThemeRed is' + customThemeRed);
    }
...

由于某种原因，即使我通过 NodeJS 'require' var 导入，我也无法使用这个 scss。我可以知道如何导入外部 JS/SCSS 文件

【问题讨论】：

您可以将它们添加到常量文件中，然后引用constants.ts 文件。将自定义样式作为对象返回：custom_theme_red = { background: 'red' }.. 您可以将它们应用到引用 ElementRef 内的 NativeElement 的组件中
我认为您指的是使用简单的 key-val 对，或者我可能误解了！我想使用整个 SCSS 文件并将其作为变量传递来设置我的 document.style [动态]。这样，想改变整个应用程序的主题。但是使用require，我的SCSS没有被导入，但是可以导入一个普通的CSS文件

标签： javascript angular sass

【解决方案1】：

您需要在工具链中加入某种 SASS 预处理器。我推荐Webpack，它可以一起使用 sass-launcher、css-launcher 和 style-launcher 来读取您的 SCSS 文件导入，将 SASS 转换为 CSS，并将其内联到标题中的 <style> 元素你的页面，或者你的 JS 包。

您绝对可以使用 ES2015 import 语句使用 Webpack 2 导入 SCSS 文件 - 我刚刚为一个小项目完成了它:)

【讨论】：

我正在使用 ng-cli，他们将 webpack 隐藏在里面！我怎么知道 Sass-launcher 是否存在[可能它不存在，否则它会识别并转换为 CSS]
请您分享任何参考资料来完成这项工作。我在 angular-cli: 1.0.0-beta.26 node: 6.9.1 os: win32 x64
很抱歉，我没有使用 angular-cli。普通 webpack + sass-loader 所需的配置可以在这里看到：webpack.js.org/guides/code-splitting-css