我試圖了解如何自定義 Angular CLI 構建程序，以便能夠在匯入 scss 檔案時正確構建 React 組件。我目前能夠構建一個使用一些 React 組件的 Angular 專案。有很多材料可以解釋如何實作它（實際上很簡單）。我仍然沒有找到一篇文章指出如何在 .tsx 檔案中正確決議 scss 檔案匯入。
例如，如果我有這個簡單的 React 組件：
import * as styles from "./styles.scss";
const ReactComponentWithBrokenStyles = () => (
<div className={styles.root}>This div won't have a class</div>
);
export default ReactComponentWithBrokenStyles;
如何編輯 Angular CLI 構建程序以正確添加將轉換 .scss 檔案的加載程式？
我發現一些資源指向我使用自定義構建器而不是標準構建器，這將允許我提供額外的 webpack 組態檔。我不明白的是如何在該檔案中撰寫加載程式來解決我的問題。默認的 Angular CLI webpack 配置已經有一個 .scss 檔案的加載器，它需要被 Angular 組件轉換和參考，我不想覆寫它......所以我怎樣才能為 .scss 檔案添加一個加載器在 .tsx 檔案中匯入？除了通常的正則運算式之外，有沒有辦法告訴 webpack 基于兄弟姐妹匹配檔案？
我想這畢竟是一個精致的 webpack 問題。
注意：使用 Angular CLI v7 和 webpack 4。
uj5u.com熱心網友回復：
真正的問題是：我需要區分 Angular .scss 檔案和 React .scss 檔案。
我想出的解決方案集中在使用Webpack 的 .scss 檔案規則配置，它允許以更細粒度的方式oneOf區分通過相同測驗 ( ) 的檔案。/\.scss|\.sass$/
所以我按照我在問題中發布的鏈接的建議使用了@angular-builders/custom-webpack，并且我為標準的Angular CLI Webpack配置創建了這個定制器：
const reactScssFilesLoaders = [
"style-loader",
{
loader: "css-loader",
options: {
discardDuplicates: true,
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
"postcss-loader",
"sass-loader"
];
/**
* Modifies the default Webpack config so that our React components are able to
* import styles from scss files as JS objects
* @param {*} defaultAngularConfig The default Webpack config that comes with the NG Cli
* @param {*} buildOptions The build options (not needed here)
* @returns The adjusted Webpack config
*/
function customizeWebpackConfig(defaultAngularConfig, buildOptions) {
const builtInNgScssFilesRule = defaultAngularConfig.module.rules.find(r => r.test.source.includes("scss"));
if (!builtInNgScssFilesRule) {
throw new Error("WTF?");
}
const angularScssFilesLoaders = builtInNgScssFilesRule.use;
// We only want one top level rule for .scss files, so we need to further test
// We want to leave normal Angular style files to the default loaders, and
// we just want to turn styles into JS code when imported by tsx components
builtInNgScssFilesRule.oneOf = [{
issuer: /\.(tsx)$/,
use: reactScssFilesLoaders
}, {
test: /\.(component)\.(scss)$/,
use: angularScssFilesLoaders
}]
delete builtInNgScssFilesRule.exclude;
delete builtInNgScssFilesRule.use;
return defaultAngularConfig;
}
module.exports = customizeWebpackConfig;
奇跡般有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416553.html
標籤：