npm - Angular CLI v1.7.3 控制台未应用 Sass 样式表示已启用严格的 MIME 检查
问题描述
我正在尝试将基于 sass 的样式应用于我的 Angular 项目,但没有应用样式,并且在浏览器的控制台中出现此消息:
“拒绝应用来自 ' http://localhost:4200/dest-list.component.scss ' 的样式,因为它的 MIME 类型('text/html')不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查”。
我查看了几乎所有相关查询,但没有找到解决方案,我使用的样式文件是 .scss
//Here is Angular.json file
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "tourmet",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/style.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"defaults":{
"styleExt":"scss",
"component":{}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
}
}
}},
"defaultProject": "first-app"
}
解决方案
我对您的问题进行了更多分析。看起来您的 angular.json 文件已损坏。我已经纠正了这些问题,并将 scss 样式包含在原理图中。所以请使用以下 angular.json 文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"first-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "first-app"
}
以上肯定会奏效。但是为了避免以后出现同样的错误。我推荐以下步骤
- 再次更新您的 Angular CLI。
当您使用 angular cli 创建新项目时。你应该遵循
ng new second-app --style=scss
对于您现有的项目,请尝试运行以下命令将您的 css 转换为 scss
ng set defaults.styleExt scss
按照前两个步骤将纠正您的 scss 错误。但是,如果您从 css 切换到 .scss,第三步也是必不可少的。
希望它会有所帮助并且会起作用。
推荐阅读
- python - 绘制不同子图中各种连续变量的密度
- javascript - 重定向到特定页面的问题
- excel - 如果工作表上的单元格值与另一张表上的单元格值相同,则删除该行
- ag-grid - 如何在 ag-grid 中为特定列自定义分组值?
- docker - 容器以 docker-compose up 开头,以 docker ps 列出,然后不以 docker-compose 出现
- java - 我可以使用 HashMap 在 SpringBoot 中选择要自动装配的接口 (DAO) 吗?
- javascript - JS函数调用有效
- firebase - Firestore 安全访问角色系统
- kubernetes - Kubernetes pod 中多个 emptyDir 的后果是什么?
- javascript - useEffect 依赖数组中的 [history.push] 是否会导致重新渲染?