如何不使用 Webpack 解析路径？

Question

我正在使用 Webpack 和 sass-loader、css-loader[=53= 开发一个 ReactJs 项目] & url-装载机.

我希望不解析 字体路径并保持其在SASS 文件中的设置。

问题：

如果我调用绝对路径（即：http://fonts.com/my-font.eot或/path/to/my-font.eot），路径不会被解析。

但是，如果我使用相对路径（即：my-font.eot 或 path/to/my-font.eot），url-loader 会尝试解析路径。

在我的例子中，我需要使用相对路径（即使它会生成 404 错误）。

我尝试了什么：

我试图排除 url-loader 中的所有字体扩展名，但是 Webpack 不知道如何处理这种类型的文件，即使文件可能不存在。

这是我得到的错误：

Module parse failed: C:....\fonts\my-font.eot Unexpected character ' ' (1:1) You may need an appropriate loader to handle this file type.

我还尝试禁用 css-loader 的 "url" 选项，但绝对没有任何反应。我想很有可能我没有正确添加选项：

{ test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"], options: { url: false } },

这是我当前的代码：

module: { loaders: [ { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.scss$/, /\.json$/, /\.svg$/ ], loader: 'url', query: { limit: 10000, name: 'path/dist/[name].[hash:8].[ext]' } }, { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] }, ... ] }, ... }

Answer 1

我找到了解决方案。我没有正确添加 css-loader 选项。

因为我没有找到直接使用数组语法添加选项的方法，所以我不得不切换到字符串语法。

此代码无效：

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

此代码有效：

{
    test: /\.scss$/,
    loader: 'style!css?url=false!sass'
}

Answer 2

这个问题可能有点老了，但我还是想更正答案。

当你想使用数组语法时，你基本上为每个加载器定义了所有选项。为此，您必须在数组中为加载程序使用一个对象。所以而不是

{
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    options: { url: false }
},

你必须写

{
    test: /\.scss$/,
    loaders: [
         "style-loader", 
         {
            loader:'css-loader',
            options: {
                 url: false
            }
         },
         "sass-loader"],

},

如何不使用 Webpack 解析路径？

How to NOT resolve paths with Webpack?

javascript

require

reactjs

webpack

问题：

我尝试了什么：