Webpack: @import в css или scss из bower

Question

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

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, потому что я только хочу, чтобы импортировать один конкретный файл из компонента.

Любой способ @import 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; 
}