带有CSS模块和更少的故事书UI

Question

是否可以将 Storybook UI 与 React、CSS 模块和 Less 一起使用？有没有人设法配置这种设置？

Answer 1

添加.storybook/webpack.config.js帮助我解决了这个问题，用

module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: ['style-loader'],
}, {
test: /.css$/,
use: {
loader: "css-loader",
options: {
modules: true,
}
}
}
],
},
}

Answer 2

我也有同样的情况。通过向.storybook/main.js添加webpackFinal来解决：

module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push(
{
test: /.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
},
},
require.resolve('less-loader')
]
},
);
return config;
},
};

Answer 3

以 sass 为例：

第 1 步：在主.js中配置 webpack。您可以在此处找到文档：https://storybook.js.org/docs/configurations/custom-webpack-config/

const path = require('path');
module.exports = {
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.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
stories: ['../stories/**/*.stories.js'],
};

第 2 步：安装 sass-loader https://webpack.js.org/loaders/sass-loader/

步骤 3：创建 scss 文件

@import "../stories/main.scss";
h1{color:$mediumBlue}

Answer 4

修改你的.storybook.main.js

module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-actions',
'@storybook/addon-links',
],
webpackFinal: async (webpackConfig, { 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.
const { loadCracoConfig } = require('@craco/craco/lib/config');
const { getCraPaths } = require('@craco/craco/lib/cra');
const context = {env: process.env.NODE_ENV};
const cracoConfig = loadCracoConfig(context);
context.paths = getCraPaths(cracoConfig);
const {overrideWebpackConfig} = require('@semantic-ui-react/craco-less');
overrideWebpackConfig({
context,
webpackConfig
});
// Return the altered config
return webpackConfig;
},
};

这取自node_modules/@craco/craco/scripts/start.js

Answer 5

localIdentName选项在css加载器配置中移动，所以这是新的配置。 来源： https://github.com/rails/webpacker/issues/2197#issuecomment-517234086

module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
require.resolve('less-loader'),
],
});
return config;
},
};