Загрузка файлов scss в Storybook & Angular: ожидаемый 1 селектор или правило, было "var content = Requi" - PullRequest
Новая
       8

Загрузка файлов scss в Storybook & Angular: ожидаемый 1 селектор или правило, было "var content = Requi"

0 голосов
/ 02 июля 2018

Я пытаюсь настроить сборник рассказов для своего углового проекта. Однако при попытке настроить первый рассказ для компонента я получил следующую ошибку: 

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]'
          }
        }
      }
    ]
  }
};

Теперь я получаю следующую ошибку: 

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"

Мои исследования показали, что эта ошибка обычно означает, что существует несколько тестов для .scss, однако у меня нет никаких других настроек веб-пакетов. Я использую конфиги сборника рассказов по умолчанию, и это мой index.stories.ts: 

import { storiesOf } from '@storybook/angular';
import { text, boolean } from '@storybook/addon-knobs';
import { KaButtonComponent } from '../app/modules/ka-basic-components/ka-button/ka-button.component';

storiesOf('Button', module).add('Primary', () => ({
    component: KaButtonComponent,
    props: {
        text: text('text', 'Button text'),
        disabled: boolean('disabled', true)
    },
    moduleMetadata: {}
}));

Кто-нибудь знает, откуда может возникнуть эта ошибка и как я могу ее исправить? Спасибо!

1 Ответ

0 голосов
/ 02 июля 2018

Проблема заключалась в том, что webpack не знал, как обрабатывать бит стилей оператора import в файле scss. Решение состоит в том, чтобы определить псевдоним в конфигурации веб-пакета и не включать загрузчик scss: 

const path = require('path');

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