Getting an "Invalid CSS" error when trying to compile Bootstrap 4.0 plus custom styles

[bartonwelt]

Hello, I'm running into an issue trying to compile custom scss plus Bootstrap 4.0. I'm pretty new to using rollup also, so I'm using create-react-library out of the box to handle the project config. Ultimately, the project will be used for shared internal React UI components.

The error I'm getting is: Invalid CSS after "v": expected 1 selector or at-rule, was 'var css = "@charset'

Previously, I was using node-sass-chokidar to watch/compile my scss and that worked fine. I think maybe the issue is that I'm trying to reference the css file directly, but the plugin is trying to import it into the head tag using style-inject. Not sure though.

I appreciate any help you can offer. 👍

---

In my index.scss file I'm importing my stylesheets like so:

@import "variables";
@import "node_modules/bootstrap/scss/bootstrap";
@import "custom-bootstrap";

And here's my rollup.config.js:

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import scss from 'rollup-plugin-scss'
import url from 'rollup-plugin-url'

import pkg from './package.json'

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  plugins: [
    external(),
    postcss({
      modules: true
    }),
    url(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    scss({
      output: 'dist/css/bundle.css',
      includePaths: ['node_modules']
    })
  ]
}

Then, in package.json I reference the output css like so:

"style": "dist/css/bundle.css",

[thgh]

Have you tried to put the scss plugin before the postcss plugin?

I think there is a conflict between the two modules. The scss module is trying to bundle all styles together and probably doesn't expect what postcss is doing.

[bartonwelt]

I haven't tried that. Thanks for the tip.

Do I even need postcss in this case? I kept it because it was in the config from the sample app build. I was able to get things working by just using postcss as follows:

plugins: [
    external(),
    postcss({
      plugins: [autoprefixer, clean],
      sourceMap: true,
      extract: 'dist/css/bundle.min.css'
    }),
    url(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    copy({
      from: './src/fonts',
      to: './dist/fonts'
    })
  ]

Now the problem I'm having is that my scss partials aren't being watched for changes. I have a feeling that using rollup-plugin-scss could fix that. I'll try including it before postcss to see if that works, but I'm still stumbling in the dark a bit.

[thgh]

Rollup only cares about ES modules by design. I haven't found a pretty solution to watch for changes in partials.

Have you tried https://rollupjs.org/guide/en#watch-include ?