故事书vue sass additionalData不起作用
故事书vue sass additionalData不起作用
提问于 2022-01-31 10:31:27
在我的vue.config.js文件中包含(ref：https://austingil.com/global-sass-vue-project/)：
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/storybook-components/src/styles/utils/_variables.scss";
@import "@/storybook-components/src/styles/utils/_shadowMixins.scss";
`,
implementation: require('sass')
}
}
},这允许我在vue组件中使用sass变量。
我们有一个中央和共享的故事书库，用于运行良好的公共组件，但现在我们共享它失败的变量。
如何将additionalData添加到故事书中的vue组件中？故事书项目中有一个vue.config文件，但我不认为它正在被阅读.
.storybook/main.js看起来像(遵循指南)：
const path = require('path');
// Export a function. Accept the base config as the only param.
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;
},
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
"framework": "@storybook/vue"
};所以我假设additionalData应该被添加到webpack的最后一节，我只是不明白是怎么回事？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-31 10:43:58
像往常一样..。这只橡皮鸭在贴出问题后受到了影响。这是一个非常恼人的解决办法。
下面的配置对我有效，请注意sass加载程序规则的扩展。
附加注意: webpack被修正为"webpack":"^4.46.0"的开发人员。
const path = require('path');
// Export a function. Accept the base config as the only param.
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',
{
// Compiles Sass to CSS
loader: "sass-loader",
options: {
additionalData: `
@import "./src/styles/utils/_variables.scss";
@import "./src/styles/utils/_shadowMixins.scss";
`,
implementation: require('sass'),
},
},
],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
"framework": "@storybook/vue"
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70924456
复制相关文章
相似问题
腾讯云开发者
