esheehan-gsl
commented
2 years ago Apologies. This was my mistake. I was using
<script>
import '../styles.scss';
</script>to load the stylesheet, which was processing it through Vite, not svelte-preprocess. That's why my configuration for svelte-preprocess wasn't working. If I use a <style> tag in the component, Sass is able to resolve the modules.
<style lang="scss">
@forward "src/styles.scss";
</style>
Describe the bug I get a
Can't find stylesheet to importerror despite settingincludePathswhen I configure svelte-preprocess.To Reproduce https://github.com/esheehan-gsl/svelte-preprocess-includepaths-cant-import-stylesheet
Clone the above repo and run
npm run devto see the import error.Expected behavior The dev server should start up without error, and
http://localhost:3000should loadstyles.css.Stacktraces If you have a stack trace to include, we recommend putting inside a
<details>block for the sake of the thread's readability:Stack trace
``` Can't find stylesheet to import. ╷ 1 │ @use "uswds-core"; │ ^^^^^^^^^^^^^^^^^ ╵ src/_uswds-theme.scss 1:1 @use src/styles.scss 1:1 root stylesheet Can't find stylesheet to import. ╷ 1 │ @use "uswds-core"; │ ^^^^^^^^^^^^^^^^^ ╵ src/_uswds-theme.scss 1:1 @use src/styles.scss 1:1 root stylesheet Error: Can't find stylesheet to import. ╷ 1 │ @use "uswds-core"; │ ^^^^^^^^^^^^^^^^^ ╵ src/_uswds-theme.scss 1:1 @use src/styles.scss 1:1 root stylesheet Error: Can't find stylesheet to import. ╷ 1 │ @use "uswds-core"; │ ^^^^^^^^^^^^^^^^^ ╵ src/_uswds-theme.scss 1:1 @use src/styles.scss 1:1 root stylesheet at Object.wrapException (/home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:1254:17) at /home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:69695:25 at _wrapJsFunctionForAsync_closure.$protected (/home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:3737:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:28043:12) at _awaitOnObject_closure.call$1 (/home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:28031:32) at Object._rootRunUnary (/home/evan/Code/svelte-preprocess-includepaths-cant-import-stylesheet/node_modules/sass/sass.dart.js:4139:18) at StaticClosure.Information about your project:
Your operating system: Ubuntu 21.10
svelte-preprocess4.10.6Vite (the repro was created using
npm init svelte, so it is the default SvelteKit configuration)Additional context For comparison, you can run
npm run sass, which runssasswith the--load-pathargument using the same path that’s set as theincludePathsin the SvelteKit config—this works, making me think the issue is with svelte-preprocess and not Sass or USWDS.This may be related to #476.