Closed wooln closed 1 year ago
Add a file webpack.config.js
within .storybook
directory
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: 'raw-loader',
},
{
test: /(\.scss|\.sass)$/,
use: ['raw-loader', 'sass-loader'],
},
{
test: /.*\.(mdx)$/,
use: ['raw-loader'],
}
],
},
};
Update this sass loaders in to main.js
. Here is my sample. You can import your webpack config and then merge your loaders with the webFinal
.
Skip the rest of the code. I got rid of this error but I am stuck at the point where the build is passing but it gives me angular/compiler issue
**Uncaught Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled. However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
Ideally, the library is processed using the Angular Linker to become fully AOT compiled. Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server', or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.**
const { addRemarkPlugins, resolveLibs } = require('../../../lib/webpack-util');
const codeImport = require('remark-code-import');
const custom = require('./webpack.config.js');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../../../stories/**/*.stories.mdx'
],
core: {
builder: "@storybook/builder-webpack5"
},
framework: "@storybook/angular",
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-a11y',
'@storybook/preset-scss',
'@storybook/addon-backgrounds',
'@storybook/addon-jest'
],
staticDirs: ['../dist','../../../.storybook','../../nexus/src'],
webpackFinal: (config) => {
const updatedConfig = {
...config,
module: {
...config.module,
rules: custom.module.rules
}
};
const plugin1 = addRemarkPlugins([codeImport])(updatedConfig);
const plugin2 = resolveLibs(plugin1);
return plugin2;
}
};
We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:
Describe the bug Storybook 6.5.9 build failing with Angular 14.1.0 when import global style file, while the fresh ng14 project is ok.
To Reproduce create ng14 project and init sb, that's ok.
Then, import css file in .storybook/preview.js, build failt
my-style.css
npm run storybook
errorSystem
Additional context My demo source code: ng14-sb-demo