ERR! SassError: expected "{" for global variables in nx react

Viewed 55

I am using nx storybook for react project and using global variables from xx/node_modules/xx/css file. That is on the top folder. My stories are under of another folder like xx/xx/xx/stories.tsx. I have updated preview.js like this.

import '!style-loader!css-loader!sass-loader!../node_modules/xx/css';

package.json

"css-loader": "6.7.1",
"sass": "1.54.4",
"sass-loader": "13.0.2",
"style-loader": "3.3.1"

I got error like that

ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '../node_modules/xx/css' in '/xx/xx/xx/.storybook'

Then, I updated main.js

const rootMain = require('../../../.storybook/main')
const path = require('path');

module.exports = {
...rootMain,

core: { ...rootMain.core, builder: 'webpack5' },

stories: [
...rootMain.stories,
'../../xx/lib//*.stories.mdx',
'../../xx/lib//*.stories.@(js|jsx|ts|tsx)'
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
webpackFinal: async (config, { configType }) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

config.resolve.alias = {
  ...config.resolve.alias,
  //'@': path.resolve(__dirname, "../"),
  '@css': path.resolve(__dirname, '../node_modules/xx/css')
  // ...
};

// ...

// Make whatever fine-grained changes you need
config.module.rules.push({
  test: /\.(scss|css)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        additionalData: `
          @import "@css/xx/xx/xx.scss";
          @import "@css/xx/xx/xx.scss";
          @import "@css/xx/xx/xx.scss";
          @import "@css/xx/xx/xx.scss";
          @import "@css/xx/xx/xx.scss";
        `
      },
    },
  ],
});

// Return the altered config
return config;
}
}

I see that error

R! Module build failed (from ./node_modules/@nrwl/web/node_modules/sass-loader/dist/cjs.js):
ERR! SassError: expected "{".
ERR! ╷

Do you have any idea, how can I use global variables for storybook ? Thanks

0 Answers
Related