Webpack Sass URL importazione risolvere

Question

Sto costruendo un'applicazione web utilizzando Reagire e Webpack con questa struttura di directory

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

Sto cercando di importare _vars.scss da App.scss in questo modo:

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

e funziona perfettamente Che cosa non funziona è se ho le importazioni all'interno del _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"; 

in cui tali importazioni dovrebbe risolvere relativo alla cartella styles. Invece le importazioni vengono risolte relativamente a containers/App/App.scss. Ho letto sul sito web sass-loader che si dovrebbe usare il resolve-url-loader per risolvere questo problema, ma non riesco a farlo funzionare.

L'importazione di come @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; contiene solo una dichiarazione @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; 
} 

Ecco la mia 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') 
    ] 
}; 

Questa linea, in particolare, è per la gestione dei miei stili:

{ 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])) } 

Come è stato detto su resolve-url-loader sito web, ho incluso le mappe di origine nei caricatori sass e css (così come i percorsi inclusi nelle librerie bourbon e neat, che vanno benissimo).

C'è qualcosa di palesemente evidente che mi manca che non riesco a vedere?

EDIT:

ero in grado di aggirare il problema creando un file _font.scss nella stessa directory di _var.scss, spostando tutti i @font-face dichiarazioni in _font.scss e poi sostituendo tutte le istanze di url con require all'interno delle dichiarazioni di carattere .

Non mi piace che non sia stato in grado di capire perché l'altro stava funzionando, ma funziona così va bene. Quello che ho trovato interessante è che url non ha funzionato, ho avuto l'impressione che lo css-loader si sia preso cura di questo.

Answer 1

nel vostro webpack.config

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

e poi nel foglio di stile di importazione utilizzando un @styles poi il percorso relativo

@import '~styles/yourStyle.scss';