Webpack Sass导入URL解析

我正在用这个目录结构使用React和Webpack构建一个Web应用程序

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

我试图从App.scss导入_vars.scss ， App.scss所示：

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

而且工作得很好。 如果我在_vars.scss导入了内容，则_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";

那些导入应该相对于styles文件夹来解析。 而是导入相对于containers/App/App.scss得到解决。 我在sass-loader的网站上阅读过，应该使用resolve-url-loader来解决这个问题，但是我无法使它工作。

导入为像@import "~../assets/fonts/MarkOT-ExtraLight/MarkOT-ExtraLight.css"; 只是包含一个@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;
}

这是我的webpack配置：

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

这一行尤其适用于处理我的风格：

{ 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-url-loader网站上所说的那样，我在sass和css加载器中都包含了源地图（以及包含到波旁和整洁库的路径，所有这些都加载正常）。

有没有明显的东西我错过了，我看不到？

编辑：

通过在与_var.scss相同的目录中创建一个_font.scss文件，将所有的@font-face声明移动到_font.scss ，然后用字体声明中的require替换所有的url实例，我能够解决此问题。

我不喜欢，我无法弄清楚为什么另一个人工作，但它的工作，这是很好的。 我发现有趣的是， url无效，我的印象是css-loader照顾。

---

在你的webpack.config

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

然后在你的样式表导入中使用@styles然后是相对路径

@import '~styles/yourStyle.scss';

链接地址: http://www.djcxy.com/p/89197.html

上一篇: Webpack Sass import URL resolving

下一篇: In ArangoDB, will querying, with filters, from the neighbor(s) be done in O(n)?