Question

我正在尝试使用Webpack而不是Gulp作为任务运行器，在这种情况下，只需编译所有SCSS文件，就像之前使用Compass一样。主要目标是：

运行Autoprefixer并为每个不是部分
不捆绑图像或连接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抱怨那些图像不存在于文件系统中。

Answer 1

案例结束：Webpack不是一个任务运行者。博客文章将Webpack命名为Grunt或Gulp的继任者，或未明确指出这些工具可能具有一些重叠的功能，但最终目标却截然不同。 Grunt和Gulp是任务运行者，Webpack是资产捆绑者。试图让Webpack 而不是捆绑你的资产会失去它的主要目的，而且最好选择不同的工具。

Webpack 2：编译SASS并忽略“找不到模块：错误：无法解析'./assets/image.png'”

1 个答案: