Webpack: @import в css или scss из беседки

Question

Используя Webpack, из моего css (или scss) файла я пытаюсь получить доступ к пакету bower для импорта css файла. С модулями NPM это, кажется, работает легко:

app.scss

@import "~normalize.css/normalize.css";
body {
  font-size: 12px;
}

В случае с Бауэром я пытался использовать resolve.alias заставить это работать без успеха:

webpack.config.js

  resolve: {
    alias: {
      'css-spinners' : '/bower_components/css-spinners/css/spinner'
    }
  }

app.scss

@import "css-spinners/three-quarters.css";
body {
  font-size: 12px;
}

Это сообщение об ошибке:

ERROR in ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./src/styles/app.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./css-spinners/three-quarters.css in /Users/{project root folder}/src/styles
 @ ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./src/styles/app.scss 4:10-97

Я не хочу загружать этот компонент через main в bower.json потому что я хочу импортировать только один конкретный файл из компонента.

Любой способ @ импортировать файл CSS из компонента Bower?

Answer 1

Я не пробовал это (извините, это не самый лучший способ начать ответ!), Но в прошлом мне удавалось разрешать различные каталоги, используя resolve.modules массив.

Вместо того, чтобы использовать псевдоним, вы пытаетесь что-то вроде следующего?

webpack.config.js

  resolve: {
    modules: ['node_modules', 'bower_components'],
    extensions: ['.js', '.jsx', '.scss']
  },

app.scss

@import "~css-spinners/css/spinner/three-quarters.css";
body {
  font-size: 12px;
}