Open johnpozy opened 3 years ago
@johnpozy It seems you're trying to import an .scss
file, but have wds configured only to deal with .css
files?
I'm not really familiar with using CSS transformers. What does the rollup plugin do internally? Does this file actually exist at that location?
@peschee changing the config to below code also throw same 404 error for the .scss
file. When serving the component, it will load .scss
file in dist
folder (which doesn't exist)... i'm assuming the .scss
file will be transform into .css
string and use it like this example https://github.com/bennypowers/rollup-plugin-lit-css#usage
...
mimeTypes: {
'**/*.scss': 'js',
},
plugins: [
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
postcss({ include: ['**/*.scss'], modules: true })
],
...
@LarsDenBakker planning to use postcss with scss and autoprefixer
Most probably the issue is due to the expectation that typescript compiler will copy the css/scss files to its output directory, it won't, and you need to have an alternative way for making these files available to the dev server.
See:
https://github.com/microsoft/TypeScript/issues/30835 https://vccolombo.github.io/blog/tsc-how-to-copy-non-typescript-files-when-building/
If the issue is as mentioned above, the simplest solution is to adjust your import paths:
instead of:
import style from './Button.scss';
use something like:
// path relative to typescript compiled js file in typescript "outDir"
import style from '../../../src/my-button-comp/Button.scss';
@johnpozy did you solve this problem ? can you please share the results ?
Hi, first of all thanks for the tools. It help me to scaffold my web-component project easily.
All is working fine (demoing, testing, etc) until there's a need for me to import
CSS
orSCSS
file usingPostCSS
. Been reading https://modern-web.dev/docs/dev-server/writing-plugins/examples/#importing-css for a while with a lot try and error. It would be helpful if someone can point me to the right direction.Here's my
web-dev-server.config.js
fileand
web-component.ts
fileafter running
npm start
script, it build with no error, but it throw 404 error on mySCSS
file withGET http://localhost:8000/dist/src/Button.scss net::ERR_ABORTED 404 (Not Found)
error on browser.also i've already refer to some of the issue regarding this #1359 #1351 #1281
Any recommendation?