Gulpの代わりにWebpackをタスクランナーとして使用しようとしています。これまでCompassでやっていたすべてのSCSSファイルをコンパイルしていました。主な目的は以下のとおりです。Webpack 2:SASSをコンパイルして「モジュールが見つかりません:エラー:解決できません./assets/image.png」」
- 実行Autoprefixerと部分
- ない各SCSSに個別のCSSファイルを生成する画像をバンドルするか、連結していないCSSファイル
- キープ画像のURL例えば、あるとして
background-image: url(assets/image.png)
- 画像が
#1を見つけることができない場合は、エラーをスローすることはありませんが解決し、を働いている、しかし、それは動作を停止して、すぐに#3のように、画像への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/
フォルダにドロップされます。今私はそれをそのままにしておきたいだけでなく、ファイルシステムに存在していないイメージについてwebpackに苦情を言うことなくbackground-image: url(assets/image.png)
のようなスタイルを使用します。
URLローダー/ファイルローダーを使用して実際に画像を読み込むのはなぜですか?あなたが望む/必要としないCSSファイルの画像を使用している理由を理解できません。 – thesublimeobject
おそらく私はそうすることができます/する必要があります。私は、Webpackが意味するものではない方法でやりたいと思っています。これをGulpで設定すると30分かかりましたが、画像の欠落については不平を言いません。 Webpackに組み込まれている何らかの「すべての資産をチェック」コマンドを明示的に実行している場合を除き、imhoではありません。これは概念の証明であり、ツール間の違いを把握することを目的としています。 – robro
webpackはgulpと同じことをするつもりはありません。 – thesublimeobject