A Svelte preprocessor to apply styles to all selectors globally using the :global(...) modifier with support css and postcss styles. More Information in the Svelte API
Input:
<!-- App.svelte -->
<style global type="text/postcss">
body {background-color: red;}
div a {
color: red;
}
</style>
Internal Output
:global(body) {background-color: red;}
:global(div) a {
color: red;
}
Output
body{background-color:yellow}div a{color:red}
npm install --save-dev svelte-preprocess-css-global
Using rollup-plugin-svelte
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { globalCSS } from 'svelte-preprocess-css-global';
...
export default {
...
plugins: [
...
svelte({
preprocess: {
style: globalCSS(),
},
}),
],
};
Using svelte-loader
// webpack.config.js
import { globalCSS } from 'svelte-preprocess-css-global';
module.exports = {
...
module: {
rules: [
{
test: /\.svelte$/,
exclude: /node_modules/,
use: {
loader: "svelte-loader",
options: {
...
preprocess: {
style: globalCSS()
}
}
}
},
...
]
},
...
};
You can pass options to postcss:
...
globalCSS({
plugins: [
...
]
})
Now all <style>
elements in your components that have a type="text/postcss"
and global
attribute will be preprocessed by sass.
<!-- App.svelte -->
<style global type="text/postcss">
body {background-color: red}
</style>
Import from file
(does not suport hotreload in dev server!)
<!-- src/App.svelte -->
<style global type="text/postcss" src="global.css"></style>
src/global.css
will be expected relative to folder of file App.svelte
.
Import with @import
(does not suport hotreload in dev server!)
<!-- src/App.svelte -->
<style global type="text/postcss" >
@import "global.css"
</style>
global.css
will be expected relative to folder of file App.svelte
.