CODEWITHSUNDEEP
javascriptreactjswebpacknext.js
Nicolas Meienberger
Nicolas Meienberger

Reputation: 777

NextJS Unable to use library using SASS and CSS

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 :

  1. 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;

  1. 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

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

System information

Upvotes: 2

Views: 1818

Answers (2)

ivanji
ivanji

Reputation: 187

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.

Upvotes: 0

Elyas Pourmotazedy
Elyas Pourmotazedy

Reputation: 732

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
  });

Upvotes: 1

Related Questions