React-slick: Not able to load slick carousel css

[niharjyoti333]

i imported my css like below after slick carousel css are not loading. I am using webpack..

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

getting the below Error

ERROR in ./~/resolve-url-loader?{"silent":true}!./~/css-loader?{"importLoaders":1,"sourceMap":true,"modules":true,"isDebug":true,"minimize":false,"localIdentName":"[name]-[local]"}!./~/postcss-loader!./src/components/SlickCarousel/SlickCarousel.css
Module not found: Error: Cannot resolve module '~slick-carousel/slick/slick.css' in /Users/nsarma/jcp/yoda-microsite-pdp/src/components/SlickCarousel
@ ./~/resolve-url-loader?{"silent":true}!./~/css-loader?{"importLoaders":1,"sourceMap":true,"modules":true,"isDebug":true,"minimize":false,"localIdentName":"[name]-[local]"}!./~/postcss-loader!./src/components/SlickCarousel/SlickCarousel.css 3:10-274

[akiran]

It is a build setup issue.
Nothing specific to this library.
Please try asking in stackoverflow

[BeatDeer]

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

[a-m-dev]

import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css';

THAT ALWAYS GIVES ME THIS ERROR:

ERROR in ./node_modules/slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/css-loader/index.js):ModuleParseError: Module parse failed: Unexpected character ' ' (1:7)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)    at handleParseError (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:432:19)    at doBuild.err (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:466:5)    at runLoaders (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:327:12)
    at K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:370:3    at iterateNormalLoaders (K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at Array.<anonymous> (K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:202:4)    at Storage.finished (K:\web\_Dev\webpages\05_mrChef\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at provider (K:\web\_Dev\webpages\05_mrChef\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)    at K:\web\_Dev\webpages\05_mrChef\node_modules\graceful-fs\graceful-fs.js:78:16    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:422:3)
ERROR in ./node_modules/slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/css-loader/index.js):ModuleParseError: Module parse failed: Unexpected character ' ' (1:7)You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)    at handleParseError (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:432:19)
    at doBuild.err (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:466:5)
    at runLoaders (K:\web\_Dev\webpages\05_mrChef\node_modules\webpack\lib\NormalModule.js:327:12)
    at K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at K:\web\_Dev\webpages\05_mrChef\node_modules\loader-runner\lib\LoaderRunner.js:202:4
    at process.nextTick (K:\web\_Dev\webpages\05_mrChef\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)
i ｢wdm｣: Failed to compile.

[a-m-dev]

here is my css loader configuration from my webpack

{
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader','sass-loader'],
          publicPath: '/dist'
        })
      },

[imprfekt]

@a-m-dev It's definitely a loader issue.

Try using style-loader in a combination with css-loader, not as a fallback.
You might need a file-loader additionally in order to resolve fonts from the linked css files.