使用 Vue Storybook 时无法编译 sass

Question

我正在尝试在 vue 上创建故事书。我使用 sass 编写的组件。所以，我在 .storybook/main.js 中做了这个：

webpackFinal: (config) => {
        config.module.rules.push({
            test: /\.s[ac]ss$/i,
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                // Translates CSS into CommonJS
                'css-loader',
                // Compiles Sass to CSS
                'sass-loader',
            ],
        })

        return config
}

样式如下所示：

<style lang="sass" scoped>
button
    background-color: red
</style>

所以我在尝试编译时遇到了这个错误：

SassError: Invalid CSS after "": expected 1 selector or at-rule, was "button"
        on line 1 of C:\Code\testproj\src\components\UI\TestComponent.vue

如果我把我的风格改成这样：

<style lang="sass" scoped>
button {
    background-color: red
}
</style>

一切正常，但这不是 sass 语法。

Answer 1

我遇到了同样的问题，我能够解决它。问题来自 webpack 配置。如果您使用的是 SASS，您的 webpack.config.js 文件夹中的 webpack.config.js 文件应如下所示：

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.sass$/,
    use: [
      require.resolve("vue-style-loader"),
      require.resolve("css-loader"),
      {
        loader: require.resolve("sass-loader"),
        options: {
          sassOptions: {
            indentedSyntax: true
          }
        }
      }
    ],
  });

  return config;
};

如果你使用的是 SCSS，那么它应该是这样的：

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      require.resolve("vue-style-loader"),
      require.resolve("css-loader"),
      require.resolve("sass-loader"),
    ],
  });

  return config;
};

我在阅读Vue Loader Docs时能够弄清楚这一点

Answer 2

问题是，在你的 webpack 配置中，你告诉 webpack 只有在你的文件扩展名为 test: /.s[ac]ss$/i 时才使用 sass-loader说 .sass 或 .scss。但是，您的文件扩展名为 .vue，因为您在组件的 vue 文件中使用了 sass。

使用该配置，尝试将您的 sass 样式放入 .sass 文件并检查是否有效

Answer 3

对于使用 React 17+ 和 Storybook 6.4.9+ 的任何人，我遇到了类似的问题，即 Storybook/webpack 构建不包括我的 SCSS 文件。 .storybook/main.js 中的这个配置对我有用：

module.exports = {
    "stories": [
        "../src/**/*.stories.mdx",
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
        "@storybook/addon-links",
        "@storybook/addon-essentials"
    ],
    "framework": "@storybook/react",
    webpackFinal: async (config) => {

        // add SCSS support for CSS Modules
        config.module.rules.push({
            test: /\.scss$/,
            use: [
                require.resolve("style-loader"),
                require.resolve("css-loader"),
                require.resolve("sass-loader"),
            ],
        });

        return config;
    }
}

Answer 4

我花了很多时间寻找更好的解决方案。可能是 main.js Storybook 6.4.9 的配置文件：

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"
  ],
  "addons": [
    "@storybook/addon-essentials",
    "@storybook/addon-actions",
    "@storybook/addon-controls",
    "@storybook/addon-links",
    {
      name: '@storybook/preset-scss',
      options: {
        sassLoaderOptions: {
          implementation: require('node-sass'), // ATTENTION: We need to use "node-sass" instead "sass/dart-sass"
          sassOptions: {
            indentedSyntax: true
          },
        },
      }
    },
    "@storybook/addon-postcss",
  ],
  "framework": "@storybook/vue",
  features: {
    babelModeV7: true,
  },
  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.
    
    // ATTENTION: Need to preload "global.sass" style for all elements;
    config.module.rules.map(rule => {
      if (rule.test instanceof RegExp && rule.test.toString() === '/\\.s[ca]ss$/') {
        rule.use.push({
          loader: require.resolve('sass-resources-loader'),
          options: {
            resources: [
              path.resolve(__dirname, '../src/styles/global.sass')
            ]
          }
        })
      }
      return rule
    })
    
    // ATTENTION: Need to compile "Pug" templates.
    config.module.rules.push(
      {
        test: /\.pug$/,
        oneOf: [
          // this applies to `<template lang="pug">` in Vue components
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          // this applies to pug imports inside JavaScript
          {
            use: ['raw-loader', 'pug-plain-loader']
          }
        ]
      }
    );
    
    // Return the altered config
    return config;
  },
}