How to use css @import in rollup?

Question

I try to create a simple rollup app's config and have some troubles with css.

This is my css file:

@import "normalize.css";
@import "typeface-roboto";

html, body, #root {
  height: 100%;
  font-family: Roboto, serif;
}

body {
  background: url('./images/background.jpg');
}

And all what i have is 3 errors about not found resources.

This is my config file:

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import replace from 'rollup-plugin-replace'
import postcss from 'rollup-plugin-postcss'
import html from 'rollup-plugin-fill-html'
import url from "rollup-plugin-url"

process.env.NODE_ENV = 'development'

const CWD = process.cwd()
const Paths = {
  SRC: `${CWD}/src`,
  DIST: `${CWD}/dist-rollup`,
  NODE_MODULES: `${CWD}/node_modules`
}
Object.assign(Paths, {
  INPUT: Paths.SRC + '/index.js',
  OUTPUT: Paths.DIST + '/index.js'
})


export default {
  input: Paths.INPUT,
  output: {
    file: Paths.OUTPUT,
    format: 'iife', // immediately-invoked function expression — suitable for <script> tags
    // sourcemap: true
  },
  plugins: [
    html({
      template: `${Paths.SRC}/template.html`,
      filename: 'index.html'
    }),
    postcss({
      modules: true,
      plugins: [
      ]
    }),
    url({
      limit: 10 * 1024, // inline files < 10k, copy files > 10k
    }),
    resolve(), // tells Rollup how to find date-fns in node_modules
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(), // converts date-fns to ES modules
    replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ]
}

I was tried to use some plugins like rollup-plugin-rebase and postcss-assets, but unfortunately, it did not help me.

Answer 1

Maybe i chose not common way, but single working solution for me is use postcss with 2 plugins: postcss-imports for @import syntax and postcss-url for url.

But there were difficulties too. Postcss-url don't want just work, like i expect. I had to use 3 instance of this plugin:

[
  postcssUrl(), // Find files' real paths.
  postcssUrl({
    url: 'copy',
    basePath: 'src',
    useHash: true,
    assetsPath: 'dist'
  }), // Copy to required destination.
  postcssUrl({
    url (asset) {
      const rebasedUrl = `dist/${path.basename(asset.absolutePath)}`

      return `${rebasedUrl}${asset.search}${asset.hash}`
    }
  }) // Fix final paths.
]

You may see it in complex on https://github.com/pashaigood/bundlers-comparison

And of course, i will be glad to see more simple solution if you know that, please, share with me.

Answer 2

I've found css-import to work well, the NPM package provides a cssimport command line interface that accepts a main CSS file which includes @import statements and an optional list of directory in which to search for the CSS; it outputs to stdout the merged CSS which can be written to a single file.

I use the following to output a single main.css file in my build directory, searching for imported files under node_modules:

cssimport main.css ./node_modules/ > ./build/main.css

When using rollup you can use the rollup-plugin-execute plugin to execute a shell command as part of rollup's build process. For example:

    plugins: [
      ...
      execute('npx cssimport main.css ./node_modules/ > build/main.css')
    ]