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

Image for post
Image for post

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 


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

plugins: [
preprocess: sveltePreprocess({ postcss: true }),

Create PostCSS configuration file in the project root.

module.exports = {
plugins: [
// require('autoprefixer')(),

Creating global style component

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

<style global>
@import "normalize.css";

All-right, now let’s use it.

import Normalize from "./Normalize.svelte";
<Normalizecss />
<h1>Normalize CSS</h1>

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