Question

我有一个Angular2应用程序，并使用npm脚本和Webpack2进行AOT构建并创建特定于语言的bundle。我尝试过使用：

{ test: /\.css$/, loader: 'style-loader!rtl-css-loader', exclude: /node_modules/ }

在我的webpack阿拉伯语配置文件中。我的组件将viewEncapsulation设置为Emulated。＆＃34; rtl-css-loader＆＃34;在我的组件CSS文件中翻转css规则，但是在浏览器中检查时，我看到应用了两组样式规则（CSS类）。模拟的影子DOM（原始LTR）和RTL非影子DOM，由rtl加载器生成。 shadow DOM类优先，并覆盖由rtl-css-loader生成的RTL类。

有办法：

不创建LTR样式并将其附加到RTL构建页面？
从原始LTR创建RTL类时，仍然使用基于RTL类的元素的模拟shadow DOM？

我也尝试使用＆＃34; ExtractTextPlugin＆＃34;结合＆＃34; WebpackRTLPlugin＆＃34;创建外部RTL css文件，虽然我可以生成外部RTL样式文件，但组件的原始样式（LTR）仍附加到HTML页面并覆盖rtl.css文件中生成的样式，因为它们具有更高的优先级

我想知道是否有其他人遇到过这些问题并提出了解决方案？

任何帮助将不胜感激。

Answer 1

在花了一些时间寻找解决方案后，我想出了以下方法。我在这里发帖，所以如果有人有类似的问题，这可能会有所帮助。

从webpack.config文件中删除rtl-css-loader，只使用“css-loader”，因为它用于LTR构建和包创建
在构建过程中（使用npm脚本），使用rtlcss npm包生成rtl.css文件。（https://github.com/MohammadYounes/rtlcss）
将原始css文件重命名为没有“.css”扩展名的内容，以便webpack“css-loader”在构建和捆绑过程中忽略它们
运行RTL Angular2构建，就像LTR构建一样（使用webpack和css-loader）生成所需的bundle。
构建完成后，删除rtl-css文件（重命名为.css）进行清理。您可以使用npm包，例如“del-cli”。（https://www.npmjs.com/package/del-cli）
将原始css文件的名称还原为启动进程时的名称。如果在RTL构建之后运行另一个构建，它将使用原始LTR css文件。

基本上，在这个过程中，我们使用npm包翻转css，而不是使用webpack RTL加载器和插件。这种方法还允许我们在Angular 2组件中使用正确的viewEncapsulation。

Webpack 2将LST从LTR翻转到RTL不起作用

1 个答案: