Docusaurus: Can't import css from node_modules folder

[prevuelta]

🐛 Bug Report

Trying to import css files from node_modules fails with following message:

./node_modules/@bnz/serrano-web-fonts/serrano.css
ModuleParseError: Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Create css file in node_modules folder
import css in index.js OR in docusaurus.config.js via presets: theme: customCss

Expected behavior

It loads and styles are applied

Actual Behavior

Fails to compile

Your Environment

• Docusaurus version used:
  2 alpha
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0):
• Operating system and version (desktop or mobile):
  MacOS

Reproducible Demo

Sorry

[yangshun]

You may need to add your own CSS webpack loaders.

[KingGanZeng]

You may need to add your own CSS webpack loaders.

@yangshun I have the same problem. But how can i add webpack loaders in docusaurus.config.js?

[yangshun]

@KingGanZeng https://v2.docusaurus.io/docs/lifecycle-apis/#configurewebpackconfig-isserver-utils

[KingGanZeng]

@yangshun Thanks. I got this. But for beginner, I think you should add creating-plugins before coding configurewebpackconfig. Otherwise, we may not know where to import and use this configuration.

[KingGanZeng]

@yangshun Thanks. I got this. But for beginner, I think you should add creating-plugins before coding configurewebpackconfig. Otherwise, we may not know where to import and use this configuration.

I have tried this, but still got the same error:

../packages/babel-form-theme-babelUI/node_modules/@jmfe/babel-ui/dist/style/babel-ui.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Here are my configuration:

// plugins/styleLoader/index.js

module.export = function(context, options){
  return {
    name: 'my-docusaurus-plugin',
    configureWebpack(config, isServer, utils) {
      const {getStyleLoaders} = utils
      return {
        module: {
          rules: [
            {
              test: /\.css$/,
              use: [
                'style-loader',
                getStyleLoaders(isServer)
              ],
            },
          ],
        },
      }
    },
  }
}

And where i import this:

// docusaurus.config.js
const styleLoader = require('./plugins/styleLoader')

module.exports = {
  // ...other config
  plugins: [
    styleLoader
  ],
}

Then i got another error:

Starting the development server...

A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.

Error: "plugins[0]" must be one of [string, array]

I have no idea what happened in it.
By the way, i use the lastest version: 2.0.0-alpha.64

[slorber]

@KingGanZeng I think you should not require the local plugin but instead provide its path.

Check the doc here and follow it carefully, as you see we don't require plugins.

https://v2.docusaurus.io/docs/using-plugins/#creating-plugins