在 Angular 上将样式作为模块导入

Question

问题：

考虑这个项目结构：

/src
  /public
    /styles
      /general
        /tables.scss
  /secure
    /components
      /someTable1
        /someTable.component.ts
        /someTable.component.css
      /someTable2

我想使用别名（如角度模块）导入路径 src/app/public/styles/general/tables.scss 上创建的“table.scss”上的默认样式。例如：

import { TableScss } from '@styles/general/table.scss';

@Component({
  selector: 'some-table-1',
  templateUrl: './some-table-1.component.html',
  styleUrls: ['./some-table-1.component.css', TableScss]
})

这有意义吗？我已经在 tsconfig.app.json 上注册了别名，但出现以下错误：

src/app/secure/components/some-table1/some-table-1.component.ts(x,y) 中的错误：错误 TS2307：找不到模块“@styles/general/table.scss”。

有什么想法吗？我有其他模式可以这样做吗？

Answer 1

所以你不应该像那样导入 css 文件。我不是风格专家，但你可能会在我们如何做风格方面找到一些灵感。所以我们有这样的设置

src/assets/styles/_table.scss

/** your styles here **/

src/assets/styles/_main.scss

@import "table"
@import "otherStyleFile"

src/styles.scss

@import 'assets/styles/main';

[hidden] {
    display: none !important;
}

.angular-cli.json

{
  "apps": {
    [{
      "styles": [ "styles.scss"]
    }]
  }
}

应该这样做。请注意，文件名有下划线，但导入没有，这是故意的。

但我认为您可以跳过很多步骤并针对您的情况执行此操作，因为您只有一个 css 文件。然后你的整个项目应该继承样式，所以你不需要在任何地方导入它。我不知道您是否需要在 scss 文件名中使用下划线才能工作，但我认为您不需要。

.angular-cli.json

{
  "apps": {
    [{
      "styles": [ "table.scss"]
    }]
   }
}