故事书 vue sass 附加数据不工作

Question

在我的 vue.config.js 文件中包含（参考：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添加到storybook中的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 的最后一部分，我只是看不出如何？

Answer 1

像往常一样..发布问题后，橡皮鸭的影响开始了。这是一个非常烦人的问题。

以下配置对我有用，请注意 sass-loader.

规则的扩展

补充说明：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"
};

故事书 vue sass 附加数据不工作

storybook vue sass additionalData not working

vue.js

storybook