rollupjs — import scss и css

Admin RollupJS

Как импортировать в rollupjs файлы стилей в файлах js (например, app.js).

Импорт файлов без установленных плагинов в rollupjs или в webpack, например так:

import "../scss/global.scss";
import "../scss/home.scss";

Приведет к ошибкам (rollupjs):

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

Для импорта файлов стилей в файлах js есть несколько плагинов:

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

import scss в rollupjs

Для rollupjs установим плагин:

npm install rollup-plugin-scss

В файле rollup.config.js импортируем его:

import scss from 'rollup-plugin-scss'

Далее там же добавим внутри plugins:

plugins: [
scss(),
]

Для того чтобы работала сборка svelte, нужно эти файл выводить отдельно так:

scss({
        output: 'public/build/common.css',
    }
),
Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"rollupjs — import scss и css"