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’,
}
),