Storybook 5 Sass-loader 生成空模块类名
Storybook 5 Sass-loader generate empty module classname
我最近升级了 tom Next.js 11,所以我也使用故事书 webpack5
beta。但是当我将 sass-loader
添加到配置时:
// .storybook/main.js
const path = require('path');
module.exports = {
core: {
builder: "webpack5",
},
stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},);
return config;
},
}
所以当我启动故事书时,示例根本没有 class名称:
并且 .index
class 没有像在模块中那样由 sass 编译:
要亲自查看,您可以查看我的示例 here
对于 Storybook,您可以使用 Storybook Saas Addon,效果很好。
我最近升级了 tom Next.js 11,所以我也使用故事书 webpack5
beta。但是当我将 sass-loader
添加到配置时:
// .storybook/main.js
const path = require('path');
module.exports = {
core: {
builder: "webpack5",
},
stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},);
return config;
},
}
所以当我启动故事书时,示例根本没有 class名称:
并且 .index
class 没有像在模块中那样由 sass 编译:
要亲自查看,您可以查看我的示例 here
对于 Storybook,您可以使用 Storybook Saas Addon,效果很好。