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