Storybook 6.5.9 build failing with Angular 14.1(while import global style file)

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.

ng new demo
npx sb init
npm run storybook

Then, import css file in .storybook/preview.js, build failt

import './my-style.css';

my-style.css

html {
    background-color: red;
}

npm run storybook error

WARN Force closed manager build
ModuleParseError: Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> html {
|     background-color: red;
| }
    at handleParseError (/home/yunjin/temp/demo/node_modules/webpack/lib/NormalModule.js:976:19)
    at /home/yunjin/temp/demo/node_modules/webpack/lib/NormalModule.js:1095:5
    at processResult (/home/yunjin/temp/demo/node_modules/webpack/lib/NormalModule.js:800:11)
    at /home/yunjin/temp/demo/node_modules/webpack/lib/NormalModule.js:860:5
    at /home/yunjin/temp/demo/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/home/yunjin/temp/demo/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at /home/yunjin/temp/demo/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at /home/yunjin/temp/demo/node_modules/webpack/lib/NormalModule.js:834:15
    at Array.eval (eval at create (/home/yunjin/temp/demo/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/home/yunjin/temp/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)

System

Environment Info:

  System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  Binaries:
    Node: 18.6.0 - /usr/bin/node
    npm: 8.14.0 - /usr/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/angular: ^6.5.9 => 6.5.9 
    @storybook/builder-webpack5: ^6.5.9 => 6.5.9 
    @storybook/manager-webpack5: ^6.5.9 => 6.5.9 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context My demo source code: ng14-sb-demo

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:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

storybookjs / storybook

Storybook 6.5.9 build failing with Angular 14.1(while import global style file) #18804