命令行工具: Storybook 框架: Vue/ Nuxt
问题: 我试图将全局SCSS变量导入Storybook故事中,以使它们以与Nuxt相同的方式运行组件,我尝试了使用sass-resources-loader的自定义webpack配置,但没有成功,只是想检查是否有其他人已经解决了这个问题。
命令行工具: Storybook 框架: Vue/ Nuxt
问题: 我试图将全局SCSS变量导入Storybook故事中,以使它们以与Nuxt相同的方式运行组件,我尝试了使用sass-resources-loader的自定义webpack配置,但没有成功,只是想检查是否有其他人已经解决了这个问题。
看起来Storybook在处理多个规则时存在问题。
我通过一种变通方法解决了它。
您可以阅读我写的博客,以获取详细的解释在这里。
下面是我的webpack配置 - main.js :
webpackFinal: async (config, { configType }) => {
config.module.rules.map((rule) => {
if (rule.oneOf) {
rule.oneOf = rule.oneOf.slice().map((subRule) => {
if (subRule.test instanceof RegExp && subRule.test.test('.scss')) {
return {
...subRule,
use: [
...subRule.use,
{
loader: require.resolve('sass-resources-loader'),
options: {
resources: [
path.resolve(__dirname, '../src/styles/_common.scss')
]
}
}
],
}
}
return subRule;
});
}
return rule;
});
return config;
},
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
defaultConfig.module.rules.push(
{
resourceQuery: /module/,
use: [
{
loader: 'vue-style-loader',
options: {
sourceMap: false,
shadowMode: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false,
indentedSyntax: true,
data: '@import "@/sass/_variables.scss";'
}
}
]
}
);
return defaultConfig;
};
data: '@import "@/sass/_variables.scss";'
这一行需要与项目中包含变量的SASS文件的文件路径匹配。vue inspect > output.js
命令从Vue CLI 3中检索到的,并复制了规则 test: /\.sass$/
的配置。对于那些能够让Storybook读取SCSS文件但无法读取全局变量文件的人,可以在自定义的webpack配置中执行以下操作:
module: {
rules: [
// Apply loader
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData: '@import "path/to/global.scss";',
},
},
],
},
],
}
您需要在您的 .storybook/webpack.config.js
文件中添加 scss
规则,以便 Storybook 解析 scss
。
const path = require('path');
const scss = {
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
};
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
defaultConfig.module.rules.push(scss);
return defaultConfig;
};
yarn add -D vue-style-loader sass-loader css-loader
config/storybook/config.js
中导入 SASS 样式(在以前的版本中默认为 storybook/config.js
),如下所示:// Import Styles
import '../../src/assets/styles/index.scss';
src/main.js
/ src/main.ts
中导入样式和插件,但你也需要在 Storybook 的配置中这样做,因为在运行 Storybook 时,它并没有运行整个 Vue 应用程序,而只是这些独立的组件。