Polaris shopify 导入 css 问题答案

【问题标题】：polaris shopify import css issuePolaris shopify 导入 css 问题
【发布时间】：2018-10-16 14:42:49
【问题描述】：

当我尝试像这样从 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;

我收到一个错误：编译失败

./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;

我验证了node_modules/@shopify/polaris/styles.css里面的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

为什么我在这里遇到错误，请问我该如何克服？谢谢。

【问题讨论】：

标签： javascript reactjs shopify polaris

【解决方案1】：

这是一个已知问题

https://github.com/Shopify/polaris/issues/441

升级到最新/下一个版本（3.0.0-RC3）应该没问题。

【讨论】：

来自npmjs.com/package/@shopify/polaris/v/3.0.0-rc.3，npm install @shopify/polaris --save与2.12版相同
如果您使用的是纱线，那么“纱线升级@shopify/polaris@next”请注意，这是一个候选版本。如果您想坚持使用当前的 v2，请参阅 GitHub 问题中的解决方法

【解决方案2】：

App.js的node_modules中不要导入css，如果要覆盖node_modules中的某些设置，你应该创建一个css或less文件，并在css或less文件中导入css。而且，css有很多@shopify/polaris/styles.css 中的属性，不需要全部导入。

【讨论】：

如何导入css或更少？语法是什么样的？
像这样：导入'./styles.css'
我认为你的问题不是你导入的方式，而是js文件可以分析“/node_modules/@shopify/polaris/styles.css”中的属性
但这给出了错误Module not found: Can't resolve 'styles.css'
emmm，这是一个例子，意思是你可以创建一个less或css文件，如style.css，并在style.css中添加@import "@shopify/polaris/styles.css"