NextJS Unable to use library using SASS and CSS

Question

I'm trying to add wix-style-react plugin inside my NextJS project but I'm unable to build. Inside their documentation, they say they use Stylable, SASS and CSS Modules.

When I install the plugin and build, I get the following error :

Module parse failed: Unexpected character '@' (1: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 @import '../common';

I tried both following methods :

Using next-sass inside my next.config.js

// next.config.js
const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true
})

This way I got another error warning me about a .css file

Module parse failed: Unexpected token (1: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 .root { | display: inline-block; | text-overflow: ellipsis;

Using next-css in combination with next-sass

// next.config.js
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css')

module.exports = withCss(
  withSass({
    cssModules: true,
  })
)

With this config, I get again the same error as with no config. I tried to follow this in order to configure my webpack. But I have an error StylableWebpackPlugin is not a constructor

To Reproduce

Create a new blank project with create-next-app
Install the module yarn add wix-style-react
Build yarn build

System information

OS: macOS
Version of Next.js: 9.1.4

Elyas Pourmotazedy · Accepted Answer · 2020-01-17 11:18:38Z

1

config

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
module.exports = withCSS({
    webpack: function(config) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000
            // name: '[name].[ext]'
          }
        }
      });
      return config;
    },
    ...withSass({
      cssModules: true,
      webpack: function(config) {
        config.module.rules.push({
          test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
          use: {
            loader: "url-loader",
            options: {
              limit: 100000
              // name: '[name].[ext]'
            }
          }
        });
        return config;
      }
    }),
    cssModules: false
  });

answered Jan 17, 2020 at 11:18

Elyas Pourmotazedy

7321 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ivanji · Accepted Answer · 2020-06-12 03:48:46Z

0

The error you mentioned StylableWebpackPlugin is not a constructor can be fixed by importing the plugin like this:

const { StylableWebpackPlugin} = require('@stylable/webpack-plugin'); but would this be enough to set up this library with Webpack? probably not. As their preferred bundler is Yoshi and their documentation isn't clear (outdated). However, they seem to be working on a Stylable loader for webpack (seen in one of their github branches). Hopefully, that would make a difference soon.

answered Jun 12, 2020 at 3:48

ivanji

1871 silver badge10 bronze badges

Collectives™ on Stack Overflow

NextJS Unable to use library using SASS and CSS

To Reproduce

System information

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

To Reproduce

System information

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related