Include CSS from node_modules in Preact build

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

Hi guys, I believe i need your help again. I don’t think it’s a bug, but I can’t find where I should set it up.

What is the current behaviour?

I’m using css from node module in my app(importing to a component): import 'swiper/swiper-bundle.css' or with node-sass: import 'swiper/swiper.scss' Made no difference.

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

It’s working just fine while development. But in built version(with pre-rendering) I don’t see this CSS file(styles related to this module are not applying at all)

Here are my css-loader options from preact.config.js(I believe it’s not configured properly):

const css = helpers.getLoadersByName(config, 'css-loader')[0];
console.log(css.loader.options)
// { modules: false, importLoaders: 1, sourceMap: true }

And sass-loader:

const sass = helpers.getLoadersByName(config, 'proxy-loader')[1];
console.log(sass.loader.options.options.sassOptions)
output:
{
  includePaths: [
    'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\node_modules',
    'C:\\Users\\user\\Desktop\\work\\extensions\\node_modules',
    'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\node_modules\\preact-cli\\node_modules'
  ]

}

I also noted some interesting input:

console.log(config.module.rules)
{
    test: /\.(p?css|less|s[ac]ss|styl)$/,
    include: [
      'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\src\\components',
      'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\src\\routes'
    ],
    use: [ 'style-loader', [Object], [Object] ]
  },
  {
    test: /\.(p?css|less|s[ac]ss|styl)$/,

    exclude: [
      'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\src\\components',
      'C:\\Users\\user\\Desktop\\work\\extensions\\website\\index\\src\\routes'
    ],
    use: [ 'style-loader', [Object], [Object] ]
  },

Why does it include and exclude the same?

What is the expected behaviour?

Anyway, I want to have css files from npm imported in build, what I should do? And why it isn’t configured from scratch?

Sorry if it’s silly question, I’m knew to Preact and I want to figure everything out. Thank you

[rschristian]

Alright, well, debugging process.

Can you clone this repo and see if it works? It’s a super cut down default Preact app. If it does work, that means it’s something in your project, and there’s a lot there that could be causing this. If not, then we know it’s something on your system and we can go from there.

[rschristian]

Can you provide a repo? Not entirely sure what I’m doing with Swiper, but styles seem to be there just fine. All I did was copy/paste the demo found here.

Here are my css-loader options from preact.config.js(I believe it’s not configured properly):

Could you possibly add your entire preact.config.js? And are you using something like PurgeCSS? That would likely explain the missing styles in production.

Why does it include and exclude the same?

By default, stylesheets in components and routes are treated and processed as modules. The style loader object that you did not expand has different rules regarding how styles are treated in those directories.