svelte-preprocess-css-global
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 -->
Internal Output
) )
Output
Installation
npm install --save-dev svelte-preprocess-css-global
Setup
Using rollup-plugin-svelte
// rollup.config.js;;... ... plugins: ... ;
Using svelte-loader
// webpack.config.js; moduleexports = ... module: rules: test: /\.svelte$/ exclude: /node_modules/ use: loader: "svelte-loader" options: ... preprocess: style: ... ...;
Passing options to postcss
You can pass options to postcss:
...
Usage
Now all <style>
elements in your components that have a type="text/postcss"
and global
attribute will be preprocessed by sass.
<!-- App.svelte -->
Import from file
(does not suport hotreload in dev server!)
<!-- src/App.svelte -->
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 -->
global.css
will be expected relative to folder of file App.svelte
.