Error load CSS, Module build failed: Unknown word (5:1)

[afrianjunior]

im trying load css with webpack, but fail to load, message error :

in ./~/css-loader!./~/style-loader!./~/css-loader!./semantic/dist/semantic.css Module build failed: Unknown word (5:1)

style-loader and css-loader 2 does not work?

but my webpack.base.conf.js :

{ test: /\.css$/, loader: 'style!css' }

What should I do? to solve these

im use vue-cli witk webpack template.

thanks before!

[LeoMartinDev]

Same here

[zhyc9de]

i don't know why it happened , but i found a solution
don't use css loader , just import your css file

[harwinvoid]

Same here

[harwinvoid]

I fixed it by remove { test: /\.css$/, loader: 'style!css' } from webpack.config.js. But i don't know why. anyone could tell me ?

[yinshipeng]

Same here

[Jacke]

same. webpack the most shitty software that I ever seen. It's working by magic and nobody know how to fix it

[mondaychen]

I had the same issue. I think in generally this error happens when the file is compiled by the css loader for more than once. Check your config to see if there are duplicated css loaders.

[andywer]

@mondaychen is right. You have probably got more than one loader config containing style-loader and css-loader. If their include/exclude properties allow an intersection (a source file might be matched by both) you might be screwed already... :-/

Guess the only fix is making sure there is no intersection.

[domingohui]

I saw similar things here #197
But it still doesn't work for me even if I append style! or css!

[rafaelboschini]

same here ):

[fengyongze]

same here

[michael-ciniawsky]

@LeoMartinDev @zhyc9de @harwinvoid @yinshipeng @Jacke @rafaelboschini @fengyongze you guys all using VueJS ? If then please use vue-loader instead. I reopen if my assumption is false 😛

[wnewstar]

@michael-ciniawsky
why need use vue-loader instead? I do it, but have some other question.

[wi-ski]

how do you fix the Bs

[heythanks]

remove this{ test: /.css$/, loader: 'style!css' } has no error,but css file can't effect this website

[vikashpisces]

@afrianjunior It worked for me after I changed the order of loaders from require('!css-loader!style-loader!./styles.css'); to require('!style-loader!css-loader!./styles.css');

[tiserge2]

@vikashpisces thanks guys! it works fine for me after doing it as you said

[codeaimh]

guys how I know if I have a duplicated loader?

[ghost]

same here But I solve this shit with using loader:'css-loader!style-loader'
Blv me Don't Use 'use' instead u can use 'loader' which is the keyword of the prev version of the weback and I think it's better than 'use'
I think it's because the css and style loader are not updated ...

[buddyackerman]

None of the above work. I'm using Angular 5 and have ejected the project from the cli so that I can modify the webpack config.

Here's the entry section:

"entry": {
  "main": [
    "./src\\main.ts"
  ],
  "polyfills": [
    "./src\\polyfills.ts"
  ],
  "styles": [
    "./src/ui-styles.js"
  ]

and here's the module definition:

{
  "test": /\.css$/,
  "loader": 'css-loader!style-loader'
}

I've also tried this:

{
  "test": /\.css$/,
  "loader": ExtractTextPlugin.extract('style-loader!css-loader')
}

They all produce the same error.

[liyanana]

same here.how to solve??? I cant find the answer.

[atreyhazelhispanic]

I had this same problem as well as one with scss and sass loader... By default the full npm vue app install is loading css and sass for you. I left only the rule of style-loader on the regex of css and it's perfect!

[SeedyROM]

@atreyhazelhispanic Could you share some example code for how you solved this?

[yeahhhz]

Try install a low version loader

[TylerNGUP]

same here，因为要先加载css-loader,然后才加载style-loader，so must write like this : loader='style-loader!css-loader', after 2.0，must add 后缀，-loader。

[pangjunpeng]

same here，因为要先加载css-loader,然后才加载style-loader，so must write like this : loader='style-loader!css-loader', after 2.0，must add 后缀，-loader。

oh! your english is very well👏