CSS @import causes Rollup error: "you need plugins to import files that are not JavaScript"

[acmobileguy]

Hello. i am new to TSDX and typescript in general. I came across TSDX while learning building React components in typescript. My issue is that I am getting and error in my css file where I am importing a google font.

CSS File:
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

When I build, I get the following:
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

Any help would be appreciated.

[stephencweiss]

Looks like you may need to add postcss -- here's an example of my tsdx.config.js

//tsdx.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        // only write out CSS for the first bundle (avoids redundant extra files)
         extract: !!options.writeMeta,
         inject: false,
      })
    );
    return config;
  },
};

[agilgur5]

OP did not provide a repro, so it's not clear what the context is here, but yes, per the Rollup error they would need some CSS plugin to import CSS. rollup-plugin-postcss happens to be the most common, but could use another one (and wouldn't need to use PostCSS per se for plain CSS).

See also the example in the README. @stephencweiss I've modified your comment to remove the Tailwind portion (and reword some comments) as that could be confusing to someone as that's not necessary for all CSS users.