我正在将create-react-app用于多语言项目。我想使用“ cssJanus”或“ rtlcss”之类的库将Sass生成的CSS文件转换为单独的文件，然后在切换到另一种语言时使用该新生成的文件。
这是我的index.js的样子...
import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import App from "./App";
import { configureStore } from "./store/configureStore";
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
这就是我的“ App.js”的样子……
import React, { Component } from "react";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import SignIn from "./features/signin/SignIn";
class …Bootstrap 5 支持 RTL，正如他们在文档中所说，他们使用 RTLCSS 来处理 RTL 样式。为了将 RTLCSS 与 Angular 集成，我使用 ngx-build-plus 和 custom-webpack 插件将 RTLCSS webpack 规则注入 Angular 中，但是当我使用 webpack 配置编译 Angular 时，它给了我错误，我尝试了 ngx-build-plus 和 custom -webpack 但当我清除 webpack 规则时，它们都有错误，我的项目编译成功，所以我的没有问题scss文件没有问题，这一定是 webpack 配置问题，但我找不到它。\n这是我的自定义 webpack js 文件
const rtlcss = require('rtlcss');\nconst autoprefixer = require('autoprefixer');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.s[ac]ss$/i,\n use: [\n 'sass-loader',\n {\n loader: 'postcss-loader', options: {\n postcssOptions: {\n plugins: [autoprefixer, rtlcss]\n },\n }\n },\n ],\n },\n ],\n },\n};\n正如你所看到的，我想传递所有的 scss 来通过 …
I coded based on the documents in this link. But my code doesn't work in SCSS.
this is my main.scss.
@import "node_modules/bootstrap/scss/bootstrap";
body {
background: red #{"/* rtl:blue */"};
}
and this is my html
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="compiled.css">
<title>Test</title>
</head>
<body>
<h1>Test Test Test</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
我最近决定使用RTLCSS来制作我的样式的RTL版本.现在我正在尝试使用声明级指令来告诉RTLCSS要做什么,但是SASS会将我的注释编译到下一行.
例如,font-size: 14px/*rtl:15px*/;编译到
font-size: 14px;
/*rtl:15px*/
这会阻止RTLCSS正确地进行处理.有没有解决的办法？我可以配置sass只是按原样编译值,保留注释位置？
PS我使用grunt-sass(node-sass)来处理我的scss文件.
这可能听起来很愚蠢，但我最近开始使用 laravel mix 来编译 scss 和 js 文件。但我无法理解一些事情。
我想使用 rtlcss npm 来制作 twitter-bootstrap rtl。这是 Laravel 的默认 app.scss 资源
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
@import "variables";
// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
这是默认的 app.js 资源：
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
我已经通过节点包安装了 rtlCSS，现在我想要发生的是当我运行npm run dev或观察程序时，它编译 bootstrap …