Webpack 1 + sass（做出反应）

Webpack 1 + sass（做出反应） - 不管我的图像(Webpack 1 + sass (in react) - leave my images alone)

我在React.js中有一个SASS项目并使用Webpack 1。

我有包含所有图像和其他资源文件夹的图像文件夹。

我不希望webpack对图像做任何事情，我希望它们在运行时由url加载。 我在JSX中通过在jsx代码中使用内联的图像URL来解决它（而不是导入它们）并且它工作得很好。

但是当我试图在SASS中做同样的事情时，情况就不同了：我曾经在绝对传递/images/abc.png中引用它们并且它有效。 我甚至没有为他们提供webpack加载器，它只是起作用。 但是我不得不将它改为相对路径../../www/images/abc.png并且它们都崩溃了：它没有webpack加载器就拒绝工作 - 只是为每个图像提供错误。 我尝试过使用文件加载器，但是它将所有sass使用过的图像复制到build文件夹中。 我尝试过使用url-loader，但它只是将图像包含在生成的css文件中，这使得它非常臃肿。

那么，我可以使用什么来忽略sass中的图像并在运行时通过url解决它们？

谢谢

I have a project in React.js with SASS and using Webpack 1.

I have images folders with all the images and other assets' folders.

I do not want webpack to do anything with images, I want them to be loaded at the runtime by url. I solved it in JSX by using image urls inline in the jsx code (rather then importing them) and it's working great.

But when I'm trying to do the same in SASS, it's different: I used to refer to them in absolute pass /images/abc.png and it worked. I didn't even had a webpack loader for them, it just worked. But I had to change it to the relative path ../../www/images/abc.png and it's all broke down: It refuses to work without webpack loader - just gives errors for each image. I've tried using file-loader, but it copies all sass's used images into build folder. I've tried using url-loader, but it just included the images into resulting css file making it enormously bloated.

So, what could I use to ignore the images from sass and just address them by url in the runtime?

Thanks

最满意答案

一种可能性是将css-loader的url选项设置为false，因此webpack不会触及url。 您对.scss规则可能看起来像这样（假设您使用extract-text-webpack-plugin ）：

Webpack 1：

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

Webpack 2：

{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { url: false } }, { loader: 'sass-loader' } ] }) }

但这忽略了所有网址而不仅仅是你的图片。 如果这是一个问题，您可以使用带有选项emitFile: false file-loader ，这样它就不会复制您的文件。 但是你需要一些解决方法来获得正确的路径。 在名称中使用[path]时，它将使用context的相对路径。 因为您正在将其构建到目录（例如build/ ），所以您需要通过设置publicPath选项来上一个目录（ ../ ）。 哪个会给你以下规则：

Webpack 1：

{ test: /\.png/, loader: 'file-loader?emitFile=false&name=[path][name].[ext]&publicPath=../' },

Webpack 2：

{ test: /\.png/, loader: 'file-loader', options: { emitFile: false, name: '[path][name].[ext]', publicPath: '../' } }

如果您在webpack配置中设置了context ，或者您的输出CSS文件在构建目录中的深度超过一级，则需要调整publicPath选项。

One possibility is to set the url option of the css-loader to false, so webpack won't touch the urls. Your rule for .scss could look something likes this (assuming you use extract-text-webpack-plugin):

Webpack 1:

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

Webpack 2:

{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { url: false } }, { loader: 'sass-loader' } ] }) }

But that ignores all urls not just your images. If that is a problem you could use file-loader with the option emitFile: false so it won't copy your files. But you'll need some workaround to get the correct path. When using [path] in the name it will use the relative path from the context. Because you're building it to a directory (e.g. build/) you'll need to go up one directory (../) by setting the publicPath option. Which would give you the following rule:

Webpack 1:

{ test: /\.png/, loader: 'file-loader?emitFile=false&name=[path][name].[ext]&publicPath=../' },

Webpack 2:

{ test: /\.png/, loader: 'file-loader', options: { emitFile: false, name: '[path][name].[ext]', publicPath: '../' } }

If you've set context in your webpack config or your output CSS file is more than one level deep in the build directory, you'll need to tweak the publicPath option.