时间戳

首页 > 解决方案 > 使用 Vue Storybook 时无法编译 sass

vue.js - 使用 Vue Storybook 时无法编译 sass

问题描述

我正在尝试在 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 语法。

标签： vue.jssassstorybook

解决方案

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

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时能够弄清楚这一点

推荐阅读