Import css module

sage
,
1

hi,

i want to use swiper in my project.
how?

in app.js, import 'swiper/css'; indicates an error.

yarn dev
yarn run v1.22.17
$ bud dev
✘ Module parse failed: Unexpected character '@' (13: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
|  */
|
> @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64,
...

css import doesn’t work either. (@import url('~swiper/css');)

 yarn dev  
yarn run v1.22.17
$ bud dev
Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.
✘ Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find '~swiper/css'
  in [
    ./resources/styles
  ]
    at /xy/public/wp-content/themes/xy/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/xy/public/wp-content/themes/xy/node_modules/postcss/lib/lazy-result.js:396:11)
    at async Object.loader (/xy/public/wp-content/themes/xy/node_modules/postcss-loader/dist/index.js:97:14)

what do i do wrong?
sage 10 latest.

thanks for the help!

2

Got the same question, found a solution?

3

Hey @kukac7 ,

I don’t think you’re allowed to import CSS directly in js.

Have you tried to import it in app.css?

@import 'swiper/swiper-bundle.css';

4

Hello everyone, can confirm that @DanLapteacru’s solution is the most preferred at the moment. Ideally, you should be able to import css directly in the js, I’ll take a look at the loader rules. But the net result of both of these approaches is the same.

You’ll need to import the path to the css file itself – not the export as swiper docs instruct.

@import 'swiper/swiper.min';

or

@import 'swiper/swiper.bundle';

depending on what you are looking to use.

1 Like
5

thanks, it works. /cc @DanLapteacru

1 Like