React import stylesheet that have external background: url get 500 error when server run #147

New Issue

fergalmoran · 2025-08-09T17:15:10Z

fergalmoran commented

2025-08-09 17:15:10 +00:00

Originally created by @ngohungphuc on 3/2/2018

I'm using hot module replace and and get following error when load css and js file .
The problem is when I import "../css/style.default.scss"; . The style sheet that I import contain the
background: url(../img/bg.jpg); and It cause the error happend. If I remove it everything will be ok.

my webpack file

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("cmscore.css");

module.exports = {
  entry: {
    main: "./wwwroot/frontend/js/main.js"
  },
  output: {
    path: path.resolve(__dirname, "wwwroot/dist"),
    filename: "[name].js",
    publicPath: "/dist/"
  },
  plugins: [extractCSS, new webpack.optimize.UglifyJsPlugin()],
  module: {
    loaders: [{
        test: /\.scss$/,
        use: extractCSS.extract({
          use: [{
              loader: "css-loader",
              options: {
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: "sass-loader"
            }
          ],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: ["babel-loader", "eslint-loader"]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "file-loader?name=/img/[name].[ext]"
      }
    ]
  },
  watch: true
};

import "bootstrap/scss/bootstrap.scss";
//the stylesheet cause error happend
import "../css/style.default.scss";
import "../css/style.scss";
import "toastr/toastr.scss";
import "./App/Helper/envConfig";
import { isDevEnviroment } from "./App/Helper/envConfig";
import "./App/Account/LoginForm.jsx";

if (isDevEnviroment()) {
  module.hot.accept();
}

*Originally created by @ngohungphuc on 3/2/2018* I'm using hot module replace and and get following error when load css and js file . The problem is when I `import "../css/style.default.scss";` . The style sheet that I import contain the `background: url(../img/bg.jpg);` and It cause the error happend. If I remove it everything will be ok. ![chrome_2018-03-02_23-20-17](https://user-images.githubusercontent.com/13591213/36909333-4b70ccea-1e70-11e8-97cd-89a9ea54e3cd.png) my webpack file ```js const path = require("path"); const webpack = require("webpack"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractCSS = new ExtractTextPlugin("cmscore.css"); module.exports = { entry: { main: "./wwwroot/frontend/js/main.js" }, output: { path: path.resolve(__dirname, "wwwroot/dist"), filename: "[name].js", publicPath: "/dist/" }, plugins: [extractCSS, new webpack.optimize.UglifyJsPlugin()], module: { loaders: [{ test: /\.scss$/, use: extractCSS.extract({ use: [{ loader: "css-loader", options: { minimize: true, sourceMap: true } }, { loader: "sass-loader" } ], // use style-loader in development fallback: "style-loader" }) }, { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: ["babel-loader", "eslint-loader"] }, { test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/img/[name].[ext]" } ] }, watch: true }; ``` ``` import "bootstrap/scss/bootstrap.scss"; //the stylesheet cause error happend import "../css/style.default.scss"; import "../css/style.scss"; import "toastr/toastr.scss"; import "./App/Helper/envConfig"; import { isDevEnviroment } from "./App/Helper/envConfig"; import "./App/Account/LoginForm.jsx"; if (isDevEnviroment()) { module.hot.accept(); } ```

fergalmoran closed this issue

2025-08-09 17:15:10 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#147