CSS angular2-cli 给出 @multi 样式错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40025762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular2-cli gives @multi styles error
提问by codestruggle
I started using angular2-cli recently and created a new project. I wanted to use bootstrap in my project hence I installed bootstrap and then wanted to import the bootstrap css file like it is shown in the the angular2-cli guide here. https://github.com/angular/angular-cli#global-library-installationAfter running ng serve I get the following error.
我最近开始使用 angular2-cli 并创建了一个新项目。我想在我的项目中使用引导程序，因此我安装了引导程序，然后想导入引导程序 css 文件，就像这里的 angular2-cli 指南中所示。https://github.com/angular/angular-cli#global-library-installation运行 ng serve 后出现以下错误。
ERROR in multi styles Module not found: Error: Can't resolve '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @ multi styles
找不到多样式模块中的错误：错误：无法解析“/home/krishna/angular2_migrate/webui/node_modules”中的“/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css” /angular-cli/models'@ 多样式
What am I doing wrong ?
我究竟做错了什么 ？
Information about angular2-cli version
有关 angular2-cli 版本的信息
krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64
回答by Noopur Dabhi
Add ../ before path.
在路径前添加 ../ 。
In angular-cli.json,
在 angular-cli.json 中，
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Update
更新
In angular7, there is angular.json file and you do not need to add ../ before path
在 angular7 中，有 angular.json 文件，您不需要在路径前添加 ../
回答by atfede
In Angular 7 the file is called 'angular.json'.
在 Angular 7 中，该文件称为“angular.json”。
Make sure you got the right extension set for the "styles" option. In my case I installed the Angular CLI with the SCSS option but the extension was set as SASS by default.
确保为“样式”选项设置了正确的扩展名。就我而言，我安装了带有 SCSS 选项的 Angular CLI，但默认情况下将扩展设置为 SASS。
"styles": [
"src/styles.scss" // default was: src/styles.sass
],
回答by Roger Perez
I am using Angular 6so my filename is angular.json, but I was able to resolve the similar issue by removing the "../" path that it was asking for.
Below is my setup for adding bootstrap and jquery to my angular app.
我使用的是Angular 6，所以我的文件名是angular.json，但我能够通过删除它要求的“../”路径来解决类似的问题。下面是我将 bootstrap 和 jquery 添加到我的 angular 应用程序的设置。
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": ["../node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
Note:for jquery i needed the "../" while bootstap did not require it.
注意：对于 jquery，我需要“../”，而 bootstap 不需要它。
Alternate based on issues I had:
根据我遇到的问题替代：
"styles": [
"src/styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
Also, this article holds multiple alternate options on setting it .
此外，本文包含多个设置它的替代选项。
回答by Felix Runye
In my case the error was was because i had
在我的情况下，错误是因为我有
"styles":[
"styles.css"
]
in my .angular-cli.json
在我的 .angular-cli.json 中
i solved it by manually typing the path of my all SCRIPTS and CSS ..i.e for example
我通过手动输入我的所有脚本和 CSS 的路径来解决它 ..ie 例如
"styles":[
"styles/bootstrap.scss",
"styles/app.scss",
]
Paths in angular-cli.json are relative to the project root (src/ normally). For instance, you have the src/styles.css file, but in angular-cli.json it's listed only as styles.css.
angular-cli.json 中的路径相对于项目根目录（通常为 src/）。例如，您有 src/styles.css 文件，但在 angular-cli.json 中，它仅作为 style.css 列出。
回答by Sundeep
give the path like "./node_modules/bootstrap/dist/css/bootstrap.min.css"not like
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
给路径就像"./node_modules/bootstrap/dist/css/bootstrap.min.css"不喜欢
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
"styles":
[
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
回答by Sundeep
give the path like "./node_modules/bootstrap/dist/css/bootstrap.min.css" not like "../node_modules/bootstrap/dist/css/bootstrap.min.css"
给出类似“./node_modules/bootstrap/dist/css/bootstrap.min.css”的路径而不是“../node_modules/bootstrap/dist/css/bootstrap.min.css”
"styles":
[
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
回答by suraj garla
Go to angular.json
转到 angular.json
navigate to styles and add another entry for bootstrap.min.css like
导航到样式并为 bootstrap.min.css 添加另一个条目，例如
回答by Dholu
Copy and paste the following in your {}angular.json file should work perfect.
将以下内容复制并粘贴到您的 {}angular.json 文件中应该可以正常工作。
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css" ],
回答by user2053483
I got same error in angular 7 after installing primeng
安装primeng后，我在angular 7中遇到了同样的错误
I removed ./ from path in angular.json file rename "src/styles.scss" from "src/styles.css" and it works for me
我从 angular.json 文件中的路径中删除了 ./ 从“src/styles.css”重命名“src/styles.scss”，它对我有用
回答by Ragesh D Antony
In file angular.json , I changed styles.sass to styles.scss .
在文件 angular.json 中，我将styles.sass 更改为styles.scss。
I build successfully
我构建成功
that is navigate to src folder and see the extension of styles file
即导航到 src 文件夹并查看样式文件的扩展名
change it accordingly in angular.json styles object
在 angular.json 样式对象中相应地更改它
