Webpack Sass URL nhập khẩu giải quyết

Question

Tôi đang xây dựng một ứng dụng web sử dụng Phản ứng và Webpack với cấu trúc này thư mục

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

Tôi đang cố gắng để nhập khẩu _vars.scss từ App.scss như vậy:

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

và hoạt động tốt. Có gì không làm việc là nếu tôi có nhập khẩu bên trong _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"; 

nơi những hàng nhập khẩu nên giải quyết tương đối so với thư mục styles. Thay vào đó, nhập khẩu đang được giải quyết tương ứng với containers/App/App.scss. Tôi đọc trên trang web của sass-loader mà một trong những nên sử dụng resolve-url-loader để giải quyết vấn đề này nhưng tôi không thể làm cho nó hoạt động.

Một nhập khẩu để thích @import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; chỉ chứa một tuyên bố @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; 
} 

Dưới đây là cấu hình webpack của tôi:

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

dòng đặc biệt này dành cho xử lý phong cách của tôi:

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

Như đã nói trên resolve-url-loader trang web, tôi bao gồm các bản đồ nguồn trong cả hai trình tải sass và css (cũng như các đường dẫn được bao gồm vào bourbon và các thư viện gọn gàng, tất cả đều tải tốt).

Có điều gì hiển nhiên rõ ràng là tôi đang thiếu mà tôi không thể thấy?

EDIT:

tôi đã có thể workaround vấn đề bằng cách tạo ra một tập tin _font.scss trong cùng thư mục với _var.scss, di chuyển tất cả các @font-face tờ khai vào _font.scss và sau đó thay thế tất cả các trường hợp của url với require bên trong tờ khai phông chữ .

Tôi không thích rằng tôi không thể tìm ra lý do tại sao người kia đang làm việc nhưng nó hoạt động rất tốt. Điều tôi thấy thú vị là url không hoạt động, tôi đã bị ấn tượng rằng css-loader đã quan tâm đến điều đó.

Answer 1

trong webpack.config bạn

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

và sau đó trong nhập khẩu stylesheet của bạn sử dụng một @styles sau đó đường dẫn tương đối

@import '~styles/yourStyle.scss';