Angular2 webpack 相关 css 文件答案

【问题标题】：Angular2 webpack relative css fileAngular2 webpack 相关 css 文件
【发布时间】：2016-12-03 18:01:08
【问题描述】：

我正在使用带有 webpack 的 Angular2 cli，并尝试创建一个包含相对路径 css 文件的独立模块，如果不使用完整路径，我将无法使其工作。

我已按照此处的文档进行操作，但仍然无法正常工作。 https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

@Component({
    selector: 'mymodulecomponent',
    template: '<view></view>',
    styleUrls: ['./mystyle.component.scss']
})

是否存在一些依赖关系或我做错了什么？

我最终想为 npm 构建，所以如果有另一种方法来包含 cc 文件，我会打开。

【问题讨论】：

尝试从路径中删除“./”：['mystyle.component.scss']。如果这不起作用，请尝试使用简单的 css 文件。
您的代码 sn-p 在这里没有任何问题，并且使用 angular-cli 您还预先配置了 webpack，除非您对其进行了调整。因此，问题一定出在您的 Angular 应用程序源代码中，如果您尝试在应用程序示例中重现它并在此处提供代码，它可能会有所帮助。
@jali-ai 我没有修改任何默认的 Angular cli 或 webpack 设置。你有任何种子项目或 plunk 展示它吗？我已经尝试了几种，但都没有使用相对路径 css。
@Rob 这是一个种子项目，app.component.scss angular-cli-project-seed 中的 scss 代码最少，但我所做的只是ng new angular-cli-project-seed --style=scss。确保您可以先更新您的 angular-cli：npm uninstall -g angular-cli && npm cache clean && npm install -g angular-cli
还有一点是你提到了css 文件，但你的代码中有scss。要设置默认样式，请使用 --style 选项和 ng new command 上的 scss、sass 或 styl 值之一。仅使用css 不需要此选项

标签： angular npm webpack angular-cli

【解决方案1】：

添加一个模块ID，像这样：

@Component({
    moduleId: module.id,
    selector: 'mymodulecomponent',
    template: '<view></view>',
    styleUrls: ['./mystyle.component.scss']
})

另请参阅：Angular2 - What is the meanings of module.id in component?

【讨论】：

你所指的答案，正确地指出使用webpack你不需要设置module.id，这个问题就是这种情况。
正确，webpack 不使用 module.id 并且 webpack 的文档化方法似乎不起作用。
那么，您是使用带有 Webpack 的 cli（即从 SystemJS 切换到 Webpack 后的普通 cli），还是显式使用 Webpack（即完整的 monty，带有 webpack.config.?s 等.)？前者（还）没有提供完整的 Webpack，它只在“幕后”使用（并要求 moduleId），而后者与 cli 一起提出了几个问题（参见 cli' 问题） - 可能是一个种子项目可能是比 cli 更好的选择。无论如何，更多信息可能会帮助我们帮助您。