Question

我正在尝试为我的有角度的项目设置故事书。但是，当尝试为组件设置第一个故事时，出现以下错误：

hasMany

然后我添加了一个具有以下规则的webpack配置：

ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
Module build failed:
@import '~styles/helpers/variables';
^
  File to import not found or unreadable: ~styles/helpers/variables.

现在，出现以下错误：

const path = require('path');

module.exports = {
  module: {
    rules: [{
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../')
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: __dirname
      },
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: 'fonts/[hash].[ext]',
            limit: 5000,
            mimetype: 'application/font-woff'
          }
        }
      },
      {
        test: /\.(ttf|eot|svg|png)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[hash].[ext]'
          }
        }
      }
    ]
  }
};

我的研究表明，此错误通常意味着存在对.scss的多个测试，但是我没有任何其他webpack配置。我正在使用默认的故事书配置，这是我的index.stories.ts：

ERROR in ./src/app/modules/ka-basic-components/ka-button/ka-button.component.scss
Module build failed:
@import '~styles/helpers/variables';
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

有人知道这个错误可能来自哪里以及如何解决吗？谢谢！

Answer 1

问题是webpack不知道如何处理scss文件中import语句的〜styles位。解决方案是在webpack配置中定义别名，而忽略scss加载器：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            styles: path.resolve(__dirname, '../src/styles')
        }
    }
};

在Storybook和Angular中加载scss文件：预期1个选择器或规则，是“ var content = requi”

1 个答案: