更新时间:2023-09-30 09:47:40
在您使用 angular-cli
的构建过程中,会创建一个生产文件夹,因此您的本地文件(如资产、字体、样式表或插件/脚本)将会改变.
Angular CLI 通过在 .angular-cli.json
中指定这些路径来构建处理此问题的方法.
在那里你会发现一个看起来像这样的部分:
...应用": [{"root": "src","outDir": "dist",资产":["favicon.ico",//在这里放置你的资产的相对路径,比如图像],风格":[资产/字体/fonts.css"],脚本":["../node_modules/jquery/dist/jquery.js",资产/javascript/libs/common.js"],...}],...希望有帮助.
更新:不可能使用通配符/globs 在某个文件夹中包含多个样式表:
我们不考虑为样式添加 glob 支持,因为加载顺序是相关的.相反,只需创建一个文件,按照您想要的顺序导入所有内容并将其放入样式数组中.来源:https://github.com/angular/angular-cli/issues/3069
按照建议,您应该查看 SASS
或 LESS
,创建一个主样式表,其中以正确的顺序包含所有样式表,并包含生成的 css 文件.
Opened a new angular 4 project and I'm trying to load my assets folder and I get error
net: ERR_ABORTED
I'm trying to get fonts.css or any file from the assets folder and I get this error. what I'm doing wrong?
I tried this way and I still the project not compile
"styles": [
"styles.css",
"assets/fonts/fonts.css",
"assets/stylesheets/ionicons.min",
"assets/stylesheets/fonts/fonts.css",
"assets/stylesheets/bootstrap.css",
"assets/stylesheets/isotope.css",
"assets/stylesheets/venobox.css",
"assets/stylesheets/sinister.css",
"assets/stylesheets/slimmenu.css",
"assets/stylesheets/main.css",
"assets/stylesheets/main-bg.css",
"assets/stylesheets/main-responsive.css"
],
During your build process with angular-cli
a production folder is created, therefore your path to local files (like assets, fonts, stylesheets or plugins / scripts) will change.
Angular CLI has a build in way to handle this, by specifiying these paths in the .angular-cli.json
.
There you will find a part that looks like this:
...
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"favicon.ico",
// place the relative paths to your assets, like images, here
],
"styles": [
"assets/fonts/fonts.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"assets/javascript/libs/common.js"
],
...
}
],
...
Hope it helps.
Update: Using wildcards / globs for including multiple stylesheets in a certain folder is not possible:
We're not looking at adding glob support to styles, because loading order is relevant. Instead, just make a single file that imports everything in the order you want and put that in the styles array. Source: https://github.com/angular/angular-cli/issues/3069
As suggested, you should look into SASS
or LESS
, create one main stylesheet which includes all of your stylesheets in the correct order, and include the generated css file.