Docz: Cant load Component with *.css import

Created on 13 Feb 2019  路  3Comments  路  Source: doczjs/docz

Bug Report

docz dev throwing error, when css styles imported directly into component js file:

Failed to compile.

./src/components/Button/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .button-v1 {
|     border-radius: 20px;
|     font-family: 'roboto_medium';

code
code2

Most helpful comment

I guess you need to modify the webpack configuration.

In doczrc.js:
~js
modifyBundlerConfig: bundlerConfig => {
const rules = [
{
test: /.css$/,
loader: "style-loader!css-loader"
}
];
bundlerConfig.module.rules.push(...rules);
return bundlerConfig;
}
~

In package.json:
~json
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
~

Documentation: https://www.docz.site/documentation/project-configuration#build-pipeline

All 3 comments

I guess you need to modify the webpack configuration.

In doczrc.js:
~js
modifyBundlerConfig: bundlerConfig => {
const rules = [
{
test: /.css$/,
loader: "style-loader!css-loader"
}
];
bundlerConfig.module.rules.push(...rules);
return bundlerConfig;
}
~

In package.json:
~json
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
~

Documentation: https://www.docz.site/documentation/project-configuration#build-pipeline

I guess you need to modify the webpack configuration.

In doczrc.js:

  modifyBundlerConfig: bundlerConfig => {
    const rules = [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ];
    bundlerConfig.module.rules.push(...rules);
    return bundlerConfig;
  }

In package.json:

  "devDependencies": {
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1"
  }

Documentation: https://www.docz.site/documentation/project-configuration#build-pipeline

Yep, its working. Thank you)

I tried the above sollution, it didn't work. I am using docz with a rollup config. Check this branch docz-css.
I am also getting the same error with docz-plugin-css
image
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kachkaev picture kachkaev  路  3Comments

ilyanoskov picture ilyanoskov  路  3Comments

regrettably picture regrettably  路  3Comments

ssylvia picture ssylvia  路  3Comments

tsnolan23 picture tsnolan23  路  3Comments