Laravel 为 url() 混合禁用文件加载器
Laravel Mix disable file loader for url()
Laravel 5.4 引入了 laravel 与 webpack 的混合。在 laravel mix 中没有关于处理图像的明确文档(例如,它是如何工作的以及如何根据我们的需要对其进行自定义)。由于它没有像我预期的那样工作,我想为我当前的项目禁用它。
我怎样才能禁用它?
我尝试删除 webpack.config.js 中的以下代码:
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
但是 运行 命令 npm run dev
产生了这个错误:
You may need an appropriate loader to handle this file type.
Laravel 混合版本 0.8 及以上
与 laravel mix v0.8 一样,有简单的 api 选项可以做到这一点。要禁用 url() 文件加载器,请在 webpack.mix.js
中设置以下选项
mix.options({
processCssUrls: false
});
Laravel 混合版本 0.7 及以下
解决方案 1:禁用 url() 处理
url() 被 css-loader 解释为导入。目前 CSS-Loader 是一种 all-or-nothing 方法,所以我们需要禁用所有 url() 处理,这样做..
打开 node_modules\laravel-mix\setup\webpack.config.js
并进行以下更改,
{ loader: 'css-loader' + sourceMap },
替换为
{ loader: 'css-loader?url=false' + sourceMap.replace("?", "&") },
解决方案 2:在 url()
中使用绝对 link
以 /
开头的 URL 将不会被处理 例如:url(/images/something.jpg)
。如果你的项目支持url以/
开头,你可以直接使用不会有任何问题。
Laravel 5.4 引入了 laravel 与 webpack 的混合。在 laravel mix 中没有关于处理图像的明确文档(例如,它是如何工作的以及如何根据我们的需要对其进行自定义)。由于它没有像我预期的那样工作,我想为我当前的项目禁用它。
我怎样才能禁用它?
我尝试删除 webpack.config.js 中的以下代码:
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
但是 运行 命令 npm run dev
产生了这个错误:
You may need an appropriate loader to handle this file type.
Laravel 混合版本 0.8 及以上
与 laravel mix v0.8 一样,有简单的 api 选项可以做到这一点。要禁用 url() 文件加载器,请在 webpack.mix.js
mix.options({
processCssUrls: false
});
Laravel 混合版本 0.7 及以下
解决方案 1:禁用 url() 处理
url() 被 css-loader 解释为导入。目前 CSS-Loader 是一种 all-or-nothing 方法,所以我们需要禁用所有 url() 处理,这样做..
打开 node_modules\laravel-mix\setup\webpack.config.js
并进行以下更改,
{ loader: 'css-loader' + sourceMap },
替换为
{ loader: 'css-loader?url=false' + sourceMap.replace("?", "&") },
解决方案 2:在 url()
中使用绝对 link以 /
开头的 URL 将不会被处理 例如:url(/images/something.jpg)
。如果你的项目支持url以/
开头,你可以直接使用不会有任何问题。