【发布时间】：2017-07-05 14:49:23
【问题描述】：
我正在尝试使用 Webpack 而不是 Gulp 作为任务运行器，在这种情况下，只需编译所有 SCSS 文件，就像我之前使用 Compass 所做的那样。主要目标是：
- 运行 Autoprefixer 并为每个非部分 SCSS 生成单独的 CSS 文件
- 不要捆绑图像或连接 CSS 文件
- 保持图片网址不变，例如
background-image: url(assets/image.png) - 如果找不到图片，不要抛出错误
#1 已解决并且可以正常工作，但是一旦 SCSS 链接到上面 #3 中的图像，它就会停止工作并抛出错误：
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./scss/style.scss
Module not found: Error: Can't resolve './assets/image.png' in 'C:\Users\robro\projects\...\my-project\dev\styles\scss
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./scss/style.scss 6:15328-15369
@ ./scss/style.scss
我想“简单地”忽略该错误，而不必将丢失的文件复制到我的本地硬盘驱动器。这主要是我很固执，认为“Compass 不需要这些图像，为什么 Webpack 需要？”
这是我的设置：
webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var ExtractCSS = new ExtractTextPlugin('css/[name]');
module.exports = {
entry: {
'style.css': './scss/style.scss',
'admin.css': './scss/admin.scss'
},
output: {
filename: './css/[name]'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractCSS.extract({
fallback: "style-loader",
use: [
"css-loader",
"postcss-loader",
"sass-loader"
]
})
},
{ test: /\.(jpg|jpeg|png|svg|gif|woff|woff2|otf|ttf)$/, use: 'ignore-loader' }
]
},
plugins: [
ExtractCSS
],
watch: true
};
package.json
{
"dependencies": {},
"devDependencies": {
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"ignore-loader": "^0.1.2",
"node-sass": "^4.5.0",
"postcss-loader": "^1.3.0",
"sass-loader": "^6.0.0",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
}
如您所见，我尝试使用ignore-loader 阻止sass-loader 抱怨缺少图像，但无济于事。老实说，我什至不确定这就是它的用途。
只要我从 SCSS 中删除任何链接到图像的行，一切都会正常工作：style.css 和 admin.css 被构建、自动添加前缀并放入 css/ 文件夹。现在我想保持这种状态，但也使用像 background-image: url(assets/image.png) 这样的样式，而不需要 webpack 抱怨文件系统上不存在这些图像。
【问题讨论】：
-
你为什么不直接使用 url-loader/file-loader 来加载图片？——我不明白你为什么在你的 CSS 文件中使用你不想要的图片/需要...
-
也许我可以/应该。我想我正在尝试以 Webpack 不应该做的方式做事。使用 Gulp 进行设置需要 30 分钟，并且它不会抱怨丢失图像。它不应该恕我直言，除非我明确地运行某种“检查我的所有资产”命令——这是 Webpack 内置的。这只是为了证明概念，了解工具之间的差异。
-
webpack 并不意味着和 gulp 做同样的事情。
-
这正是我在此期间意识到的。感谢您抽出宝贵时间:)
-
只需在 Webpack3 中执行此操作（也应该适用于 WP2）：
module: { rules: [ (...), { test: /\.scss$/, exclude: /node_modules/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", use: ['css-loader?url=false', 'sass-loader'] }) } ] },您需要的部分是?url=false：这告诉加载程序不要处理找到的 url，这意味着它不会处理文件（图像等）。
标签： css sass webpack webpack-2