CLI工具:故事书 框架:Vue / Nuxt
问题:我试图将全局SCSS变量引入Storybook Stories,因此它们以与Nuxt相同的方式运行组件,我尝试使用sass-resources-loader自定义webpack配置但没有运气,只是想检查是否有其他人已经解决了这个问题
答案 0 :(得分:0)
您需要在.storybook/webpack.config.js
中添加scss规则,以使故事书能够解析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
答案 1 :(得分:0)
我遇到了以下问题:全局SASS变量导致Vue的Storybook失败。
对我来说,使用以下配置在webpack.config.js
文件夹中创建.storybook
文件解决了我的问题:
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
然后复制规则test: /\.sass$/
的配置,从Vue CLI 3中检索了此部分配置。
答案 2 :(得分:0)
如果在Storybook组件资源管理器UI中运行组件时未应用样式,只需将SASS样式导入主Storybook config/storybook/config.js
(在以前的版本中默认为storybook/config.js
),如下所示:
// Import Styles
import '../../src/assets/styles/index.scss';
通常,您会在src/main.js
/ src/main.ts
中导入样式和插件,但是您还需要在Storybook配置中执行此操作,因为在运行Storybook时,它并没有运行整个Vue应用,而只是在运行这些单独的组件。
答案 3 :(得分:0)
这似乎是issue,故事书可以处理多个规则。
我通过解决方法解决了该问题。
您可以阅读我写的博客,以获取详细说明here。
下面是我的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;
},
希望这对某人有帮助!
答案 4 :(得分:0)
对于可以让 Storybook 读取 SCSS 文件但无法读取全局变量文件的任何人,请在您的自定义 webpack 配置中执行此操作:
module: {
rules: [
// Apply loader
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData: '@import "path/to/global.scss";',
},
},
],
},
],
}