rollupjs – import scss and css

How to import into rollupjs style files in js files (like app.js).

Import files without plugins installed into rollupjs or webpack, like this:

import “../scss/global.scss”;
import “../scss/home.scss”;

Will result in errors (rollupjs):

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
svelte / scss / global.scss (1: 5)
1: html {
^

There are several plugins for importing style files in js files:

rollup-plugin-scss
rollup-plugin-postcss
sass-loader
scs-loader

import scss in rollupjs

For rollupjs, install the plugin:

npm install rollup-plugin-scss

In file rollup.config.js import it:

import scss from ‘rollup-plugin-scss’

Next, add inside plugins:

In order for the svelte assembly to work, you need to output these files separately as follows:

scss({
output: ‘public / build / common.css’,
}
),

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *