![](/img/trans.png)
[英]Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"
[英]style-loader stop working when I update "@angular-devkit/build-angular"
我在 angular8 工作並面臨一個問題,
為了動態加載我的樣式,我使用了波紋管代碼並且它工作正常,但是當我將包"@angular-deficit/build-angular": "^0. 800.0"
為"@angular-deficit/build-angular": "^0. 803.21"
,然后它停止工作。 該應用程序運行良好,終端和瀏覽器控制台中沒有錯誤,但應用程序上未實現樣式。
declare function require(name: string): any;
ngOnInit() {
require('style-loader!./file-path');
}
包.json
{
"name": "latest-frontend-theme",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ngx-loading-bar/core": "^4.2.0",
"@ngx-loading-bar/router": "^4.2.0",
"angular2-text-mask": "^9.0.0",
"crypto-js": "^3.1.9-1",
"file-saver": "^2.0.2",
"moment": "^2.24.0",
"mydatepicker": "^2.6.8",
"ng2-ckeditor": "^1.2.6",
"ng2-file-upload": "^1.3.0",
"ng6-toastr": "^6.0.0",
"ngx-google-places-autocomplete": "^2.0.4",
"ngx-slick": "^0.2.1",
"rxjs": "~6.5.3",
"rxjs-compat": "^6.5.3",
"tslib": "^1.9.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.21",
"@angular/cli": "~8.3.21",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.8",
"@types/node": "~12.12.21",
"codelyzer": "^5.2.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~8.5.4",
"tslint": "~5.20.1",
"typescript": "~3.4.3",
"webpack-bundle-analyzer": "^3.6.0"
}
}
任何形式的幫助都是可觀的。
我今天遇到了同樣的問題,但仍然無法使用style-loader
找到解決方案,所以我想出了一個替代解決方案,我將分享,因為這仍然沒有得到解答。
我以前使用過這樣的style-loader
:
// in the AppComponent
private initTheme(settings: Settings) {
if (settings.style) {
// set specific theme
require(`style-loader!./../../src/${settings.style.id}-theme.scss`);
}
else {
require(`style-loader!./../../src/default-theme.scss`);
}
}
我的解決方案是更新此函數以手動應用樣式表(作為已處理的 CSS 文件),如下所示:
// in the AppComponent
private initTheme(settings: Settings) {
const applyStyleSheet = (styleName: string) => {
const head = document.getElementsByTagName('head')[0];
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = `${styleName}.css`;
head.appendChild(style);
};
if (settings.style) {
// set specific theme
applyStyleSheet(`${settings.style.id}-theme`);
}
else {
applyStyleSheet(`default-theme`);
}
}
為了處理 SCSS 文件,我更改了angular.json
文件,將extractCss
添加到選項中:
"options": {
"extractCss": true
...
}
...並在styles
數組中指定要處理但未注入的每個 SCSS 文件:
"styles": [
{
"input": "src/default-theme.scss",
"bundleName": "default-theme",
"inject": false
},
{
"input": "src/basic-theme.scss",
"bundleName": "basic-theme",
"inject": false
}
...
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.