Question

问题：在我的Angular2（4.0）应用中，如何从node_modules中的模块导入样式表（css）？

我在这里有一个模块：

node_modules/@swimlane/ngx-datatable/release/index.css

我想导入这个样式表：

@import '~@swimlane/ngx-datatable/release/index.css';

我尝试了以下方法，没有运气：

在我的组件中拥有scss文件：

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'site_table',
  template: require('./site_table.html'),
  styleUrls: ['./site_table.scss', '@swimlane/ngx-datatable/release/index.css']
})

在我的组件中：

{{1}}

Answer 1

因为您已经在使用SCSS，所以在./site_table.scss导入它就像这样

@import "~swimlane/ngx-datatable/release/index";

注意：请勿添加扩展程序。

它将从节点包导入样式表。这对我有好处，希望它也能帮到你。这样，您只需在组件中使用单个样式表，它就会更清晰。

Answer 2

使用完整的相对网址尝试：

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'site_table',
  template: require('./site_table.html'),
  styleUrls: [
          './site_table.scss', 
          '../../node_modules/@swimlane/ngx-datatable/release/index.css' 
  ]
})

没有尝试过您的注释，但没有webpack，节点包解析可能无法正常工作。我可能错了。

Answer 3

如果您正在使用带有angular.json文件而不是webpack的新angular-cli，@ sickelap答案中的波浪号（〜）可能对您不起作用。

相反，您可以做的是将其添加到angular.json文件中：-

        ...
        "styles": [
          ...
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "node_modules/@swimlane"
          ]
        },
        ...

然后，在组件的.scss文件中，插入以下内容：

@import "ngx-datatable/release/index";

请注意，.css扩展名不是必需的。

Angular2：如何从node_modules导入样式表？

3 个答案: