imports and url loading broken (using scss) since post preact-cli@3.0.0-rc.10

Do you want to request a feature or report a bug? A bug

What is the current behaviour? To begin with it seems this is not a problem with scss/sassLoader, rather somewhere else. Up to rc10 it has been working, after rc13 and rc14 it is broken.

Using scss with files located in root/src/style/*.scss, in those importing scss and css files from other folders, such as root/node_modules/ or root/work_files/ using @import “” or url("). The content does not show up in the browser and in the browser console warnings such as “Error in parsing value for ‘background-image’. Declaration dropped.” will appear.

sassLoader itself will not throw any errors in the terminal console when running preact watch or preact build, it finds and loads the files just fine it seems. Changing the paths will make sassLoader complain it does not find the files, indicating sassLoader is not the issue.

If the current behaviour is a bug, please provide the steps to reproduce.

• preact create a typescript template
• npm install node-sass
• npm install sass-loader
• npm install flag-icon-css (to test importing)
• rename src/style/index.css to src/style/index.scss
• change src/index.js import of css to import “./style”;
• in src/style/index.scss add @import “…/…/node_modules/flag-icon-css/css/flag-icon.min.css”; . (you can also test using a background-image: url(“”))
• in src/routes/home/index.tsx add <a class="flag-icon flag-icon-gb" data-flag="en" /> below Home header.

Run watch and visit site. If using rc10 all good, should see a flag and no warning in console, if rc13 or rc14 no flag and a console full of warnings (if FF, chrome is silent).

What is the expected behaviour? content import to scss outside of src/ should show up in the browser. It seems with rc13 and rc14 you have to use src/* for the content to both load with scss and show up in browser.

If this is a feature request, what is motivation or use case for changing the behaviour?

Please mention other relevant information. This is the info from the test project I did with the above steps. My regular project where I first encountered the issue is up-to-date with the packages. Both have the issue.

Environment Info: System: OS: Linux 5.6 KDE neon 5.18 CPU: (12) x64 Intel® Core™ i7-8700 CPU @ 3.20GHz Binaries: Node: 12.16.3 - ~/.npm-global/bin/node npm: 6.14.5 - ~/.npm-global/bin/npm Browsers: Chrome: 83.0.4103.61 Firefox: 76.0.1 npmPackages: preact: ^10.3.1 => 10.4.4 preact-cli: ^3.0.0-rc.14 => 3.0.0-rc.14 preact-render-to-string: ^5.1.4 => 5.1.8 preact-router: ^3.2.1 => 3.2.1 npmGlobalPackages: preact-cli: 3.0.0-rc.10

[smjnab]

Amazing. Thank you very much for doing this so swiftly.

I tested the edits and everything was working again. Tested the typings and css was working fine, did a test with scss as well and that too generated working typings (with an edit of the globpattern).

[rschristian]

Should be fixed as of https://github.com/preactjs-templates/typescript/pull/29