Установка 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>
Глобальные стили в Svelte
Для импорта глобальных стилей нужно обязательно указать global. Иначе на страницу будут влиять внутренние стили и нельзя изменить внешние влияния других стилей.
<style global lang="scss">
@import "../scss/global.scss";
@import "../scss/buttons.scss";
</style>
@import "../scss/global.scss";
@import "../scss/buttons.scss";
</style>
Для того, чтобы присвоить всем файлам глобальные стили, достаточно в одном из них прописать:
<style lang="scss">
:global {
@import '../../../assets/scss/table';
}
:global {
@import '../../../assets/scss/select';
}
</style>
:global {
@import '../../../assets/scss/table';
}
:global {
@import '../../../assets/scss/select';
}
</style>
