You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi,
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'
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi,
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 }) => {
//
configTypehas a value of 'DEVELOPMENT' or 'PRODUCTION'// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
}
}
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
Beta Was this translation helpful? Give feedback.
All reactions