polaris shopify import css issue

Question

when I try to import styles.css from App.js like this

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

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

Why am I getting an error here and how can I overcome this please? thank you.

score 1 · Accepted Answer · answered Oct 22 '18 at 20:07

1

This was a known issue

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

Upgrade to the latest / next version (3.0.0-RC3) and it should be fine.

answered Oct 22 '18 at 20:07

cdavid15

413
7
14

from https://www.npmjs.com/package/@shopify/polaris/v/3.0.0-rc.3, `npm install @shopify/polaris --save` is the same as ver 2.12 – t q Oct 22 '18 at 20:24
If you are using yarn then ‘yarn upgrade @shopify/polaris@next’ note that this is a release candidate. If you want to stick with current v2 see workaround in the GitHub issues – cdavid15 Oct 22 '18 at 20:26

score 0 · Answer 2 · answered Oct 16 '18 at 15:00

0

Don't import css in node_modules in App.js,if you want to overwrite some settings in node_modules,you should create a css or less file,and import the css in css or less file.And,there are many css property in @shopify/polaris/styles.css,ther is no need to import them all.

answered Oct 16 '18 at 15:00

Root

2,301
1
10
14

how would I import css or less? what would the syntax look like? – t q Oct 16 '18 at 15:04
like this: import ‘./styles.css' – Root Oct 16 '18 at 15:28
I think your problem is not the way you import, it's the js-file can‘ analysis the property in " /node_modules/@shopify/polaris/styles.css" – Root Oct 16 '18 at 15:30
1

but that gives an error `Module not found: Can't resolve 'styles.css'` – t q Oct 16 '18 at 15:31
emmm,it's an example,meaning you can create a less or css file like style.css,and add @import "@shopify/polaris/styles.css“ in style.css – Root Oct 16 '18 at 15:35
@weber have you been able to resolve the problem?...I'm getting the same issue – tee Oct 20 '18 at 18:47
@tee not yet, but I will definitely share once I do. Please post if you find a solution as well. – t q Oct 22 '18 at 13:51

polaris shopify import css issue

2 Answers2