This article shows simple way to import styles from node_modules using svelte-preprocess and PostCSS

Image for post
Image for post
postcss.org

Install dependencies

First of all we need to install svelte-preprocess to use PostCSS.

$ npm i -D svelte-preprocess 

Then install PostCSS itself.

$ npm i -D postcss postcss-load-config 

For CSS imports from node_modules, we use postcss-import plugin.

$ npm i -D postcss-import 

Configuration

After successfully installing all required dependencies, we need to modify rollup config.

rollup.config.js
-
...
plugins: [
svelte({
...
preprocess: sveltePreprocess({ postcss: true }),
}),
...

Create PostCSS configuration file in the project root.

postcss.config.js
-
module.exports = {
plugins: [
require('postcss-import')(),
// require('autoprefixer')(),
]
};

Creating global style component

In this article, I will use normalize.css to demonstrate importing from node_modules.

Normalize.svelte
-
<style global>
@import "normalize.css";
</style>

All-right, now let’s use it.

App.svelte
-
<script>
import Normalize from "./Normalize.svelte";
</script>
<Normalizecss />
<main>
<h1>Normalize CSS</h1>
</main>

That’s it.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store