从 Angular 5 中的 node_modules 加载 CSS 文件时出错答案

【问题标题】：Error when loading CSS files from node_modules in Angular 5从 Angular 5 中的 node_modules 加载 CSS 文件时出错
【发布时间】：2018-07-10 02:56:48
【问题描述】：

我正在尝试使用 OnsenUI 2 创建模板，但无法从 .angular-cli.json 文件的 node_modules 文件夹中加载 CSS 文件。我按照https://onsen.io/v2/guide/angular2/#angular-2 上的指示做了这个

"styles": [
          "../node_modules/onsenui/css/onsenui.css",
          "../node_modules/onsenui/css/onsen-css-components.css",
          "styles.css"
        ],

我刚刚检查了 CSS 文件，它们确实存在于这个文件夹中

然后我看到这个错误

./node_modules/css-loader 中的错误？{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":假}!./node_modules/onsenui/css/onsenui.css 模块构建失败：错误：无法解析“C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\onsenui\css”中的“ionicons/css/ionicons.min.css” 在 onError (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:61:15) 在 loggingCallbackWrapper (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在 runAfter (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:158:4) 在 innerCallback (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:146:3) 在 loggingCallbackWrapper (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个（C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\tapable\lib\Tapable.js:252:11）在 C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4 在 loggingCallbackWrapper (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在 runAfter (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:158:4) 在 innerCallback (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:146:3) 在 loggingCallbackWrapper (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个（C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\tapable\lib\Tapable.js:252:11）在 innerCallback (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\Resolver.js:144:11) 在 loggingCallbackWrapper (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个（C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\tapable\lib\Tapable.js:249:35）在 resolver.doResolve.createInnerCallback (C:\Users\mauri\Documents\GitHub\IMS_MobileApps\Demos\Demos - OnsenUI\demo1\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:44:6) @ ./node_modules/onsenui/css/onsenui.css 4:14-119 @multi ./node_modules/onsenui/css/onsenui.css ./node_modules/onsenui/css/onsen-css-components.css ./src/styles.css

【问题讨论】：

标签： angular angular-cli node-modules onsen-ui

【解决方案1】：

我使用的是 Angular CLI 1.6.6，我通过运行 npm install -g @angular/cli@latest 将其更新到 1.6.7。这解决了问题

【讨论】：