Установка sass / scss в реактивном фреймворке svelte.
svelte-preprocess
Устанавливаем
npm install --save-dev svelte-preprocess
Также могут пригодится такие модули:
npm install --save-dev node-sass
npm install --save-dev postcss
npm install --save-dev svelte-preprocess-sass
npm install --save-dev autoprefixer
npm install --save-dev postcss
npm install --save-dev svelte-preprocess-sass
npm install --save-dev autoprefixer
Некоторые из них обязательны (например node-sass) и без них не будет работать svelte-preprocess. Устанавливаем по аналогии.
rollup.config.js
Теперь настраиваем.
В файле rollup.config.js
// SCSS
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
scss: {
// includePaths: ['scss'],
data: `
@import '../scss/global.scss';
@import '../scss/buttons.scss';
@import '../scss/page.scss';
`,
},
postcss: {
plugins: [require('autoprefixer')],
},
});
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
scss: {
// includePaths: ['scss'],
data: `
@import '../scss/global.scss';
@import '../scss/buttons.scss';
@import '../scss/page.scss';
`,
},
postcss: {
plugins: [require('autoprefixer')],
},
});
Далее в этом же файле, там где указано CSS:
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
// SCSS
preprocess,
}),
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
// SCSS
preprocess,
}),
Для работы в файле Svelte обязательно в стилях указать lang=’scss’
<style lang="scss">
@import './styles.scss';
// Или можно писать прямо тут
</style>
@import './styles.scss';
// Или можно писать прямо тут
</style>
Для импорта глобальных стилей нужно обязательно указать global:
<style global lang="scss">
@import "../scss/global.scss";
@import "../scss/buttons.scss";
</style>
@import "../scss/global.scss";
@import "../scss/buttons.scss";
</style>
Дело в том, что иначе будут импортированы только те стили, которые имеются на странице.
