Служить другому файлу SCSS на основе свойства направления текста
Вот еще один способ сделать это. Он задокументирован на официальном сайте MySQL. https://dev.mysql.com/doc/connector-python/en/connector-python-api-mysqlcursor-execute.html
В духе он использует тот же самый механик ответа @Trey Stout. Тем не менее, я нахожу это более красивым и читаемым.
insert_stmt = (
"INSERT INTO employees (emp_no, first_name, last_name, hire_date) "
"VALUES (%s, %s, %s, %s)"
)
data = (2, 'Jane', 'Doe', datetime.date(2012, 3, 23))
cursor.execute(insert_stmt, data)
И чтобы лучше проиллюстрировать любую потребность в переменных:
Примечание: обратите внимание на выполненное выполнение.
employee_id = 2
first_name = "Jane"
last_name = "Doe"
insert_stmt = (
"INSERT INTO employees (emp_no, first_name, last_name, hire_date) "
"VALUES (%s, %s, %s, %s)"
)
data = (employee_id, conn.escape_string(first_name), conn.escape_string(last_name), datetime.date(2012, 3, 23))
cursor.execute(insert_stmt, data)
2 ответа
У меня будет 3 таблицы стилей, одна для нормального направления, файл общих стилей, который будет импортирован в обе, а затем таблица стилей rtl
// shared.scss
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "base/variables";
//default.scss
@import "shared.scss"
//rtl.scss
@import "shared.scss"
@import "base/directional";
, после чего вы можете импортировать их в свое приложение реакции, например, так
if (RTL) {
require('rtl.scss')
} else {
require('default.scss')
}
см. Этот ответ React RTL. Условный импорт CSS
В итоге я создал два разных CSS-файла с использованием пакета extract-text-webpack-plugin npm.
{
test: /style\/.*\.scss$/,
use: styleCss.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /app-rtl\/.*\.scss$/,
use: styleRtlCss.extract({
use: ['css-loader', 'sass-loader']
})
},
{
test: /commonStyle\/.*\.scss$/,
use: ['css-loader', 'sass-loader']
},
Затем загрузили один из стилей на основе значения каталога
Routers.js
class Routes extends Component {
constructor(props) {
super(props);
this.state = {
stylePath: loadStyle(props.direction)
}
const defaultLanguage = props.customer.defaultLang || LOCAL_LANGUAGES[0].code;
props.InitializeDefaultLang(defaultLanguage);
props.getVehicles();
props.getCountriesOnly(defaultLanguage);
props.changeDefaultDirection(defaultLanguage);
}
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.direction !== this.props.direction) {
this.setState({
stylePath: loadStyle(this.props.direction)
})
}
}
return (
<div>
<link rel="stylesheet" type="text/css" href={this.state.stylePath} />
</div>
)
config.js
export default function loadStyle(direction) {
if (direction === 'ltr') {
return '/style.css';
} else {
return '/style-rtl.css';
}
}
Надеюсь, это поможет если кто-то столкнулся с той же проблемой. Единственная проблема здесь в том, что для смены стиля требуется вечность.
Я просто оставлю это и использую Node.