Полярис шопифи импорт импорт css вопрос
Когда я пытаюсь импортировать styles.css из App.js, как это
import React from 'react';
import {render} from 'react-dom';
import * as PropTypes from 'prop-types';
import {AppProvider, Page, Card, Button} from '@shopify/polaris';
import '@shopify/polaris/styles.css'; // << issue
import SettingsForm from './SettingsForm';
class App extends React.Component {
static contextTypes = {
easdk: PropTypes.object,
};
render() {
return (
<AppProvider>
<Page title="Settings">
<SettingsForm />
</Page>
</AppProvider>
);
}
}
export default App;
Я получаю сообщение об ошибке: не удалось скомпилировать
./node_modules/@shopify/polaris/styles.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@shopify/polaris/styles.css)
Unclosed bracket (3864:37)
3862 | background-color:#c4cdd5;
3863 | background-color:var(--progress-upper, #c4cdd5);
> 3864 | background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
| ^
3865 | background-image:linear-gradient(to right, var(--progress-lower, transparent) 0%, var(--progress-lower, transparent) var(--Polaris-RangeSlider-progress, 0%), var(--progress-upper, transparent) var(--Polaris-RangeSlider-progress, 100%), var(--progress-upper, transparent) 100%);
3866 | border:none;
Я проверил CSS внутри node_modules/@shopify/polaris/styles.css
такой же как https://sdks.shopifycdn.com/polaris/2.12.1/polaris.css
Я сделал глобальный поиск по этой строке background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
но результат вышел на 0
Почему я получаю ошибку здесь и как я могу преодолеть это, пожалуйста? благодарю вас.
2 ответа
Это была известная проблема
https://github.com/Shopify/polaris/issues/441
Обновитесь до последней / следующей версии (3.0.0-RC3), и все должно быть в порядке.
Не импортируйте css в node_modules в App.js, если вы хотите перезаписать некоторые настройки в node_modules, вы должны создать файл css или меньше и импортировать css в файл css или меньше. И есть много свойств css в @shopify/polaris/styles.css, нет необходимости импортировать их все.