[英]polaris shopify import css issue
when I try to import styles.css from App.js like this当我尝试像这样从 App.js 导入styles.css
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;
I get an error: Failed to compile我收到一个错误:编译失败
./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;
I verified the css inside node_modules/@shopify/polaris/styles.css
is the same as https://sdks.shopifycdn.com/polaris/2.12.1/polaris.css
我验证了
node_modules/@shopify/polaris/styles.css
的 css 与https://sdks.shopifycdn.com/polaris/2.12.1/polaris.css
相同
I did a global search for this line background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
but result came out to 0我对这行
background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
进行了全局搜索background-image:linear-gradient(to right, transparent 0%, transparent 0%, transparent 100%, transparent 100% transparent;
但结果为 0
Why am I getting an error here and how can I overcome this please?为什么我在这里遇到错误,我该如何克服这个问题? thank you.
谢谢你。
This was a known issue这是一个已知问题
https://github.com/Shopify/polaris/issues/441 https://github.com/Shopify/polaris/issues/441
Upgrade to the latest / next version (3.0.0-RC3) and it should be fine.升级到最新/下一个版本(3.0.0-RC3)应该没问题。
不要在App.js的node_modules中导入css,如果你想覆盖node_modules中的一些设置,你应该创建一个css或less文件,并在css或less文件中导入css。而且,@中有很多css属性shopify/polaris/styles.css,不需要全部导入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.