Module parse failed: Unexpected character '@' Sage 10

sage
,
1

Hi I’m using sage 10 and added slick-carousel and react-slick.
I’ve added react-slick and slick-carousel packages by using yarn

yarn add react-slick
yarn add slick-carousel

and then imported required css files like this:

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

When I add import statements for importing slick css, yarn build command throws an error: Module parse failed: Unexpected character ‘@’. This issue happens only when I’m importing external css file inside a js file. You can see the error message below.

╭ sage [82619ef58ee50380]                                                                                            ./public
│
│ │ Module parse failed: Unexpected character '@' (1:0)
│ │
│ │ > @charset 'UTF-8';
│ │ | /* Slider */
│ │ | .slick-loading .slick-list
│

I found resources on stackoverflow(sass - Webpack 5 error "Uncaught Error: Module parse failed: Unexpected character '@'" when loading fonts - Stack Overflow) but there are some modifications is needed in webpack config file and In my setup of sage10 I can’t find any webpack config file. Do I need to create this manually?

I found one resource here as well https://discourse.roots.io/t/import-css-module/22262 but it says import CSS to app.css file. What if someone wants to import that particular CSS for a specific component instead importing it for complete app?

Even when we add these css files in app.css it throws and build warnings:

│ │ Module Warning (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ (6:1) from "postcss-import" plugin: @import must precede all other statements (besides @charset or empty @layer)
│ │ Code:
│ │   @import 'aos/dist/aos.css'
│
│ │ Module Warning (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ (20:1) from "postcss-import" plugin: @import must precede all other statements (besides @charset or empty @layer)
│ │ Code:
│ │   @import 'slick-carousel/slick/slick.css'

Using the following versions:
Sage 10.7.0
“slick-carousel”: “^1.8.1”
“react-slick”: “^0.29.0”
“yarn”:“1.22.21”

Any help or workaround is much appreciated. Thanks!

1 Like
2

Please review How to best ask questions on this forum

We’ll re-list this topic once you’ve shown the steps you’ve taken to hit this issue. Please also post your error messages and file contents as text, not a screenshot, using code blocks

4

Hi @ben

Please remove unlisting now as I have updated my post with the required details.

5

Thanks for updating your post, but you still need to provide the steps you took (post the code/the contents of your files)

How exactly did you add slick-carousel and react-slick? How are you trying to use it?

6

I have added all the required details from my end. Please check now

1 Like
8

Hi,

I encountered the same problem, adding css-loader worked for me. Try to add this to your bud config after installing css-loader:

  app
    .hooks.on('build.module.rules.oneOf', (rules = []) => {
      rules.push({
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      });

      return rules;
    });
2 Likes
9

Thanks @Menno

It worked for me as well. Thanks again! :grinning: