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"