importing CSS/SCSS throw 404 error

[johnpozy]

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 or SCSS file using PostCSS. 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 file

// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
import rollupPostcss from 'rollup-plugin-postcss';
import { fromRollup } from '@web/dev-server-rollup';

const postcss = fromRollup(rollupPostcss);

/** Use Hot Module replacement by adding --hmr to the start command */
const hmr = process.argv.includes('--hmr');

export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
  nodeResolve: true,
  open: '/',
  watch: !hmr,

  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
  // esbuildTarget: 'auto'

  /** Set appIndex to enable SPA routing */
  // appIndex: 'demo/index.html',

  /** Confgure bare import resolve plugin */
  // nodeResolve: {
  //   exportConditions: ['browser', 'development']
  // },
  mimeTypes: {
    '**/*.css': '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: ['**/*.css'], modules: true })
  ],

  // See documentation for all available options
});

and web-component.ts file

import { html, LitElement, property } from 'lit-element';

import style from './Button.scss';

export class Button extends LitElement {
  static styles = style;

  @property({ type: Number }) counter = 5;

  __increment() {
    this.counter += 1;
  }

  render() {
    return html`
      <button @click=${this.__increment}>${this.counter}</button>
    `;
  }
}

after running npm start script, it build with no error, but it throw 404 error on my SCSS file with GET 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?

[peschee]

@johnpozy It seems you're trying to import an .scss file, but have wds configured only to deal with .css files?

[LarsDenBakker]

I'm not really familiar with using CSS transformers. What does the rollup plugin do internally? Does this file actually exist at that location?

[johnpozy]

@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

[ejez]

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/

[ejez]

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';

[gethari]

@johnpozy did you solve this problem ? can you please share the results ?