Include CSS from node_modules in Preact build

[RomanistHere]

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]

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.

[RomanistHere]

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.

It's the same repo we had a talk about last time(about routing). Here.

It's a basic example, I haven't included much new stuff. Just playing around with existing stuff.

[rschristian]

What CSS seems to be missing? Seems to match your hosted and running version if I go to /apps, which I think is where you're using Swiper?

I'll need a bit more direction as that is quite the large app for a bug reproduction.

[RomanistHere]

Slider is component inside Apps page. Currently I movde styles out of swiper node module into Slider.css if you uncomment this string and comment this - development is going to work but this css would be missing after we build our app(with prerendreing and prerender-urls.js)

[rschristian]

Doing that and running prod seems to work just fine for me, unless I'm missing something. Odd.

[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.

[deathwebo]

Hello there! Sorry to hijack this open issue, but I'm facing an identical issue.

I'm importing a package css file in one of my components, like this:

import "react-day-picker/lib/style.css";

Since I'm using tailwindcss in my project, I have this code in postcss.config.js file:

const devEnv = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
}
if (process.env.NODE_ENV === "production") {
  devEnv.plugins.push(
    require("@fullhuman/postcss-purgecss")({
      content: ["./src/**/*.js"],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    })
  )
}
module.exports = devEnv

I also had to modify my scripts to build tailwindcss's as a separate step and append that step to my dev and build scripts:

...
  "scripts": {
    "build": "NODE_ENV=production npm run build:css && preact build",
    "serve": "sirv build --port 8080 --cors --single",
    "dev": "npm run build:css && preact watch",
    "lint": "eslint src",
    "test": "jest",
    "heroku-postbuild": "npm run build",
    "build:css": "postcss src/style/tailwind.css -o src/style/index.css"
  },
...

I don't have a preact.config.js in my project btw. The result of all this is that my production build doesn't include the react-day-picker css.

[rschristian]

@deathwebo

Can you provide a repo that can reproduce this?

[deathwebo]

@rschristian Thanks Ryan, I found the solution, disabling css modules was what I needed to do, here's the link to the solution in case someone is struggling with this https://stackoverflow.com/questions/59813174/how-to-do-a-simple-import-of-a-style-in-preact-as-you-would-do-in-react

This is what my preact.config.js file now looks like:

export default function (config, env, helpers) {
  const css = helpers.getLoadersByName(config, 'css-loader')[0];
  css.loader.options.modules = false;
}

[rschristian]

Ah, yeah, if you just want to disable CSS modules that's how you do it.