WebPACK Sass import URL rozwiązywania

Question

buduję aplikacji internetowych przy użyciu React i WebPACK z tej struktury katalogów

/src 
    /components 
    /containers 
     App.js 
     App.scss 
    /assets 
     /fonts 
      MarkOT/ 
       MarkOT.css 
       MarkOT.eot 
       ... 
      ... 
     /images 
    /styles 
     _vars.scss 

próbuję zaimportować _vars.scss z App.scss tak:

@import '../../styles/vars'; 

i to działa dobrze. Co nie działa to czy mam importu wewnątrz od _vars.scss

@import "../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; 
@import "../assets/fonts/MarkOT-Light/MarkOT-Light.css"; 
@import "../assets/fonts/MarkOT/MarkOT.css"; 
@import "../assets/fonts/MarkOT-Medium/MarkOT-Medium.css"; 
@import "../assets/fonts/MarkOT-Book/MarkOT-Book.css"; 

gdzie przywóz powinno rozwiązać stosunku do folderu styles. Zamiast tego przywóz jest rozwiązywany w stosunku do containers/App/App.scss. Czytałem na stronie internetowej sass-loader s, że należy użyć resolve-url-loader, aby rozwiązać ten problem, ale nie mogę go uruchomić.

import lubić @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; tylko zawiera deklarację @font-face:

@font-face { 
    font-family: 'MarkOT'; 
    src: url('MarkOT.eot?#iefix') format('embedded-opentype'), url('MarkOT.otf') format('opentype'), 
    url('MarkOT.woff') format('woff'), url('MarkOT.ttf') format('truetype'), url('MarkOT.svg#MarkOT') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Oto mój WebPack config:

var webpack = require('webpack'); 
var path = require('path'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 
    context: path.resolve(__dirname, '..'), 
    entry: { 
     app: path.resolve(__dirname, '../src/client/index.js'), 
     vendors: ['react', 'react-dom', 'react-router'] 
    }, 
    output: { 
    path: path.resolve(__dirname, '../dist'), 
    pathInfo: true, 
    filename: 'bundle.js', 
    css: 'main.css' 
    }, 
    module: { 
    preLoaders: [ 
     { 
     test: /\.js?$/, 
     loader: "eslint-loader", 
     exclude: /node_modules/ 
     } 
    ], 
    loaders: [ 
     { 
     test: /src\/.+.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'] 
     } 
     }, 
     { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file-loader" }, 
     { test: /\.scss?$/, loader: ExtractTextPlugin.extract('style', '!css?sourceMap!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + 
    '&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1])) } 
    ] 
    }, 
    resolve: { 
    modulesDirectories: [ 
     'src', 
     'node_modules' 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'), 
    new ExtractTextPlugin('main.css') 
    ] 
}; 

Linia ta jest w szczególności do obsługi moje style:

{ test: /\.scss?$/, loader: ExtractTextPlugin.extract('style', '!css?sourceMap!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + 
    '&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1])) } 

Jak to zostało powiedziane na resolve-url-loader stronę, zawierałem mapy źródłowe zarówno w ładowarkach sass i css (jak również w dołączonych ścieżkach do bourbon i zgrabnych bibliotek, z których wszystkie ładują się dobrze).

Czy jest coś oczywistego, czego mi brakuje, czego nie widzę?

EDIT:

udało mi się obejść ten problem, tworząc plik w tym samym katalogu _font.scss jak _var.scss, przenosząc wszystkie deklaracje @font-face do _font.scss a następnie zastąpienie wszystkich wystąpień url z require wewnątrz deklaracji czcionek .

Nie podoba mi się, że nie byłem w stanie zrozumieć, dlaczego ten drugi pracował, ale działa tak, że to dobrze. Ciekawe, że url nie działa, miałem wrażenie, że zajął się tym css-loader.

Answer 1

w webpack.config

resolve: { 
    modulesDirectories: [ 'src', 'node_modules' ], 
    alias: { 
     styles: /*put the base folder of your styles here*/ 
    } 
    } 

a potem w swoim importu arkusza stylów przy użyciu @styles następnie ścieżkę względną

@import '~styles/yourStyle.scss';