Question

问题：

考虑此项目结构：

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

我想使用别名（例如angular模块）在路径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'。< / p>

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

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"]
    }]
   }
}

在Angular上将样式导入为模块

1 个答案: