Closed dharma-hippocorps closed 2 weeks ago
To resolve the issue with importing styles.scss
in your NX monorepository, follow these steps:
Update main.ts
:
Ensure that the include
paths in your webpack rules are correctly pointing to the directories containing your SCSS files.
config.module.rules.push(
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
include: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'apps/storybook-app/.storybook'),
],
},
{
test: /\.(scss|sass)$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'apps/storybook-app/.storybook'),
path.resolve(__dirname, '../src'),
],
exclude: [
path.resolve(__dirname, '../src/styles.scss'),
],
}
);
Update preview.ts
:
Ensure the correct import statement for your SCSS file.
import '!style-loader!css-loader!sass-loader!./styles.scss';
Check webpack.config.js
:
Ensure that the TsconfigPathsPlugin
and copyPlugin
are correctly configured.
const copyPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
module.exports = async ({ config, mode }) => {
const copyAssets = new copyPlugin({
patterns: [
{
from: 'libs/shared/ui-library/src/lib/styles/common/assets',
to: 'common/assets',
},
{
from: 'libs/shared/ui-library/src/lib/styles/vtr/assets',
to: 'vtr/assets',
},
],
});
const tsPaths = new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, '../.storybook/tsconfig.json'),
});
config.plugins.push(copyAssets);
config.resolve.extensions.push('.ts');
config.resolve.plugins
? config.resolve.plugins.push(tsPaths)
: (config.resolve.plugins = [tsPaths]);
return config;
};
These steps should help resolve the SCSS import issue in your Storybook setup.
/code/presets/server-webpack/src/index.ts /code/presets/server-webpack/src/lib/compiler/index.ts /code/presets/server-webpack/src/lib/compiler/json-to-csf-compiler.test.ts /code/presets/server-webpack/src/lib/compiler/stringifier.ts /code/presets/server-webpack/src/lib/compiler/types.ts /code/presets/server-webpack/src /code/presets/server-webpack/src/lib/compiler
Hi there! Thank you for opening this issue, but it has been marked as stale
because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!
I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists โ we're always happy to help. Thanks so much for your understanding.
Describe the bug
I've installed storybook in my NX monorepository. Facing issue on storybook compilation with preview.ts. I just want to import my style.scss file properly. somehow I'm getting below error on compilation.
main.ts
import '!style-loader!css-loader!sass-loader!./styles.scss';
style.scss
webpack.config.js
Reproduction link
no link
Reproduction steps
No response
System
Additional context
No response