React-quill: using quill with css modules in css-loader webpack configuration

[Fensterbank]

Hello,

I'm using css-loader with modules: true in my project.
When I follow the README.md and use import theme from 'react-quill/dist/quill.snow.css'; I get following object:

Object { "ql-container": "_1TfYIQ30FYxWvZRshbC4zi", "ql-disabled": "X5sf4tQ3Vjzd63aHfoIj2", "ql-tooltip": "uvr_IM_uLb9686k-1HSDa", "ql-editor": "_1-LIJlaTkkNyiETvloJ3Fn", "ql-clipboard": "_3JNjxHR2Wd8N-yArLWQ5iI", "ql-direction-rtl": "_2C5-kRtgGG8w31C0Y80i81", "ql-indent-1": "PiKWolNH2liFJT-U7ScmY", "ql-indent-2": "_2BOkuOtvnUN8BITBs_TQsc", "ql-indent-3": "_25QOjBc7DHqutGMCwMMo9Y", "ql-indent-4": "_1Cb8SNx7cMHhEUWqK3gD-q", … }

Is there a way, to use quill with css modules enabled in css-loader?

If this is not possible, why is the style imported this way?
If theme cannot be used, then an import like import 'react-quill/dist/quill.snow.css'; would be better, or do I miss anything here?

[alexkrolick]

In general, CSS modules are intended to contain styles for a single component. Importing a prebuilt CSS file for use with a library will not work.

If this is not possible, why is the style imported this way?

Webpack's css-loader is not specific to CSS modules, and the default for modules is false.

How to fix it:

1. Separate the loaders for local and library CSS in the module block in your Webpack config:

{
      test: /\.(css)$/,
      include: [/stylesheets/, /node_modules/],
      use: [
        'css-loader',
      ],
},
{
      test: /\.css$/,
      exclude: [/stylesheets/, /node_modules/],
      use: [
        'css-loader?sourceMap&modules,localIdentName=[local]-[hash:base64]',
      ],
},

1. If you're using a precompiler like SCSS/LESS/PostCSS you can use the @import ... syntax

2. If that doesn't work due to something else going on in your setup, you can import the styles with a link tag as in the README.

[Fensterbank]

Thank you for your quick answer.
It worked with your proposed webpack config. 👍

But then, my last argument still remains.
You should change the import in the documentation from
import theme from 'react-quill/dist/quill.snow.css';
to
import 'react-quill/dist/quill.snow.css';

Named css imports only make sense with css modules and since theme will otherwise be an empty object it just brings confusion here.
I have a very strict ESLint configuration so it would also cause a no-unused-vars violation.

[Akitha]

Add to styles.css

@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';