Import CSS File to Styled Component

Question

Is there a way to import a CSS file into a styled component?

One of my dependencies, React Quill Editor, is themeable by importing their CSS as a base and applying changes on top of it. All of my components are styled components, and I'd like to keep the CSS localized to the JS component rather than import the CSS as a 'global' style.

Right now I've take to copying their CSS into my own file in the following form.

I've written a brief example below.

/** editorCSS.js **/
import { css } from 'styled-components';
export default css`
/* copied CSS here */

.class-to-extend {
   color: green;
}
`


/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import editorCSS from './editorCSS';

const StyledReactQuill = styled(ReactQuill)`
    ${editorCSS}
    /** Additional customization if necessary (e.g. positioning) */
`
export default StyledReactQuill;
`

I'd much rather import reference their css file in the scope of the styled component vs copying it.

If I do import ReactQuillCSS from 'react-quill/dist/quill.snow.css'; it will still apply my css globally due to the css-loader plugin.

Best, Daniel

Answer 1

You could use raw-loader to load the quill.snow.css stylesheet and then include it in your styled component.

/** EditorComponent.js **/ 
import styled from 'styled-components';
import ReactQuill from 'react-quill';
import quillCSS from '!!raw-loader!react-quill/dist/quill.snow.css';

const StyledReactQuill = styled(ReactQuill)`
    ${quillCSS}
    /** Additional customization if necessary (e.g. positioning) */
`
export default StyledReactQuill;

Per the raw-loader docs, you can use !! to prevent the styles being added globally via css-loader

Adding !! to a request will disable all loaders specified in the configuration

Answer 2

You can add a module rule to import styles locally from a CSS file into a styled component.

E.g. import all third party .css files from node_modules as raw string, others as usual:

// webpack.config.js
const config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // load project styles via style-loader
        exclude: /node_modules/, 
      },
      {
        test: /\.css$/,
        use: ["to-string-loader", "css-loader"], // use to-string-loader for 3rd party css
        include: /node_modules/,
      },
      // ...
    ],
  },
  // ...
}

Usage:

import styled from 'styled-components';
import ReactQuill from 'react-quill';
import ReactQuillCSS from 'react-quill/dist/quill.snow.css' // no custom webpack syntax

const StyledReactQuill = styled(ReactQuill)`
    ${ReactQuillCSS}
    // ... other styles
`

Don't forget to install to-string-loader, if not used yet.

---

This has some advantages over @jonathanhculver's solution:

• One central config file determines, how to process .css files

• Follow Webpack recommendations:

  Use module.rules whenever possible, as this will reduce boilerplate in your source code and allow you to debug or locate a loader faster if something goes south. (docs)

• Avoid ESLint errors - take a look at the Codesandbox demo

• css-loader can still resolve @import and url() for external CSS files, raw-loader won't

Answer 3

In order to achieve that you would need to use a different loader than css-loader. You could write an different loader which prepares it for styled-components rather than adding it to the global style sheet.

If you need css-loader, you would however need to define which css files are handled by it and which ones are loaded for styled-components, which makes it not really practical imho.