web-dev-qa-db-ja.com

WebPACK-4を使用してSASSファイル内の背景イメージのURLをどのように解決できますか？

これが私の初めてここに書いているので、それを念頭に置いてください。プロジェクトでWebPackを使って初めて、私はBackground URL（）関数を使用して背景画像を設定しようとしている問題があります。

.img-container {
  background: url('../../img/homepage-login-prog.jpg') no-repeat center center fixed;
  background-size: cover;
}
 _

私のフォルダ構造は次のとおりです。

- css
  | app.css
- dist (this folder is created after building for production)
- img
  | some-image.jpg
- js
  | app.js (entry point for webpack output, 
            this is where I import main.scss file)
- js-vendor
  | vendor.js (third-party libraries like bootstrap, jquery)
- sass  (this is where I keep all my sass files which get compiled using 
         webpack loaders)
  | components
    | greetings-section.scss
    | navbar.scss
  | main.scss
  | variables.scss
- template.html
- webpack.common.js
- webpack.dev.js
- webpack.prod.js
 _

開発とプロダクションの両方にWebPACKが設定されているため、両方ともそれらの両方に別々のファイルがあります。ここで、両方が一般（Common）設定ファイルに拡張されます。そのように見える

const path = require("path");

module.exports = {
  entry:{
    main: "./js/app.js",
    vendor: "./js-vendor/vendor.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jp(e*)g|gif)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "img",
          }
        }]
      }
    ]
  }
};
 _

私のWebPack Devの設定は次のようになります。

const common = require("./webpack.common");
const merge = require("webpack-merge");
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./template.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contentHash].min.css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../../"
            }
          },
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
});
 _

そのため、WebPACK-DEV-Serverが起動したら、エラーをポップします。

ERROR in ./sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./sass/main.scss)
Module not found: Error: Can't resolve '../../img/homepage-login-prog.jpg' in 'C:\Users\...\...\...\sass'
 _

ご覧のとおり、Mini-CSS-Extract-PluginでPublicPathオプションを使用して相対パスを設定しましたが、それは私のためにそれを解決しません。私は他の人々が同様の問題を抱えているのも読んでいましたが、彼らの解決策は何も働いていませんでした、私が尋ねようとしているのは、私のSassの中の画像のURLを認識するためにWebPackをどのように構成することができるのか知っていますかファイル、そしてそれを正しくバインドしますか？

長い投稿で申し訳ありませんが、あらゆる助けが大いに感謝されるでしょう。

javascriptwebpackwebpack-4webpack-style-loader
8
dedZombie

また、相対パスと絶対パスの両方に対して resolve.modules を試すこともできます。設定ファイルに追加することによって：

module.exports = {
  ...,
  resolve: {
    modules: [
      path.resolve(__dirname, "img"),
      "node_modules"
    ],
  },
  ...
}
 _

その後、SASSファイルから画像にアクセスできます。

background-image: url("~homepage-login-prog.jpg");
 _

またはチルダを相対パスに置き換えます。

0
Justin M.