在使用Angular Mat-Menu和Nx的Storybook插件时,通常会遇到一些兼容性问题。其中一个常见问题是在Storybook中无法正常显示Mat-Menu。
要解决这个问题,需要修改Nx的Storybook配置文件。具体步骤如下:
const { styles: additionalStyles = [] } = require('../src/styles.css');
const { styles: angularMaterialStyles = [] } = require('../node_modules/@angular/material/prebuilt-themes/indigo-pink.css');
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-notes/register',
'@storybook/addon-viewport/register',
{
name: '@storybook/addon-docs',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
},
},
],
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, '../src'),
path.resolve(__dirname, '../node_modules/@angular/material'),
path.resolve(__dirname, '../node_modules/@angular/cdk'),
],
},
{
test: /\.css$/,
include: [path.resolve(__dirname, '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css')],
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: { config: { path: './postcss.config.js' } } },
],
},
...config.module.rules,
],
},
};
},
};
const { styles: additionalStyles = [] } = require('../src/styles.css');
const { styles: angularMaterialStyles = [] } = require('../node_modules/@angular/material/prebuilt-themes/indigo-pink.css');
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, '../src'),
path.resolve(__dirname, '../node_modules/@angular/material'),
path.resolve(__dirname, '../node_modules/@angular/cdk'),
],
},
{
test: /\.css$/,
include: [path.resolve(__dirname, '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css')],
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: { config: { path: './postcss.config.js' } } },
],
},
通过上述方法,就可以解决Angular Mat-Menu与Nx的Storybook插件不兼容的问题了。