Webpack4 uses style-loader to report window is not defined errors

configured webpack4, page error window is not defined when scss file is introduced in js

clipboard.png

the relevant loader code is as follows:

{
    test: /\.(css|scss)$/,
    use: [
      "style-loader",
      "css-loader",
      "sass-loader"
    ]
      },
      {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      "file-loader"
    ]
}

comment out style-loader, the page will not report an error, but there is no corresponding style

Jul.15,2022

style-loader inserts styles into the dom, probably using a window object.
are you doing server-side rendering? If so, this error will be reported because the server does not have a window object.
the solution is to use the isomorphic-style-loader package

{
    test: /\.(css|scss)$/,
    use: [
        'isomorphic-style-loader' ,
        'css-loader',
        'sass-loader'
    ]
}

because of the conflict between style-loader and mini-css-extract-plugin, remove style-loader

= original answer =

I also encountered this problem. Although I did not report wrong, the link in html became < link href= "[Object object]" / >, how to deal with

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c09d57-3299d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c09d57-3299d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?