문제 설명
특정 파일에 대한 앵귤러 로더 재정의 (Override angular loaders for specific files)
각도를 사용하여 만든 코드베이스가 있습니다. 이 코드베이스는 각도 cli를 사용하고 기본 웹팩 구성입니다. 그러나 우리는 각도에서 웹 구성 요소로 이동하기 시작했습니다. 웹 구성 요소 ts 파일 내에서 scss를 사용하기 위해 올바른 scss 파일을 종속성으로 추가하고 sass‑loader에서 컴파일된 CSS를 기다렸다가 문자열 바꾸기를 사용하여 ts 파일에 삽입하는 새로운 웹팩 로더를 만들었습니다.
이것은 일반 웹팩 환경에서 잘 작동합니다. 그러나 angular는 몇 가지 다른 로더를 사용하여 scss 파일도 처리합니다. 이 때문에 scss 파일에는 더 이상 실제 scss가 포함되지 않고 javascript가 포함됩니다. 이것은 다른 scss 파일에는 여전히 필요하지만 .webcomponent.scss로 끝나는 파일에는 필요하지 않습니다.
Angular에게 사용을 중지하려면 어떻게 해야 하나요?' 내 *.webcomponent.scss 파일에 대한 기본 로더는 무엇입니까?
내 extra‑webpack‑config.js는 다음과 같습니다.
module.exports = {
module: {
rules: [
{
test: /\.webcomponent\.ts$/,
use: [
{
loader: './webcomponent‑loader.js'
}
]
},
{
test: /\.webcomponent\.scss$/,
use: [
{
loader: 'sass‑loader'
}
]
}
]
}
};
내 angular.json에는 다음과 같은 사용자 정의 웹팩 구성이 있습니다. :
"customWebpackConfig": {
"path": "./extra‑webpack.config.js",
"mergeStrategies": {
"module": "prepend",
"loaders": "replace"
}
}
내가 사용하는 webcomponent‑loader 내에서
this.addDependency(this.resourcePath.replace(/.ts$/, '.scss'));
다음과 같은 오류가 발생합니다.
Invalid CSS after "module.exports": expected selector, was '= "/*Colors*/\\n/*Bl'
이것은 각도가 js 코드로 변환되었음을 알려줍니다. 도움을 주시면 감사하겠습니다.
이것은 각도가 js 코드로 변환되었음을 알려줍니다. 도움을 주시면 감사하겠습니다. 이것은 각도가 js 코드로 변환되었음을 알려줍니다. 도움을 주시면 감사하겠습니다.참조 솔루션
방법 1:
Eventually I was able to override the default loaders using the following extra‑webpack.config.js:
module.exports = (config, options) => {
config.module.rules.forEach(rule => {
if (rule.test.exec('.scss')) {
rule.test = new RegExp('(?<!.webcomponent)(' + rule.test.source + ')');
}
});
config.module.rules.push({
test: /\.webcomponent\.ts$/,
use: [
{
loader: './webcomponent‑loader.js'
}
]
},
{
test: /\.webcomponent\.scss$/,
use: [
{
loader: './identity‑loader.js'
},
{
loader: 'sass‑loader'
}
]
});
return config;
};
</code></pre>
Basically I take the old config and edit the test regex to use a negative lookbehind to exclude my files. Then I add my own loaders to the config rules. I still have problems getting my css, but that is another issue for which I will post a new question.
(by SubliemeSiem、SubliemeSiem)
참조 문서