I want to use css framework in my svelte project, in this case it was uikit.
I had install it with yarn add uikit
And of course i have to import the css file, with
@import '../node_modules/uikit/dist/css/uikit.min.css"
But that's not work, wherever i'm import that
Is this not available yet?
Or am I should install that with yarn, and after that I have to copy required file to outside node_modules just like [this solution]?(How to add css from node_modules to template.html in Svelte)
I think this is not restriction just for uikit, instead the way we import third party css file in node_modules into svelte app
I had some trouble following Marvelous Walrus's answer, so here's a more explicit version of the same steps.
Rollup is the bundler used by svelte. (You might know webpacker as a bundler).
Step 1: Install the rollup css plugin:
npm install -D rollup-plugin-css-only
Step 2: edit rollup.config.js
you need to import the plugin you just installed at the beginning of rollup.config.js
:
import css from "rollup-plugin-css-only";
and farther down in the file you need to find the array of plugins, and add a new on called css. For example I inserted it before the svelte
plugin, which looks like this:
plugins: [
css({ output: "public/build/extra.css" }),
svelte({ ...
When rollup does it's thing, it will read all the css-files imported by your components,
combine them into one, and write them to public/build/extra.css
Step 3: edit public/index.html
Add the link to the new css file. For me this looked like this:
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/build/extra.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />
Step 4: profit!
Now you are all set to use css files from your installed npm packages. for example I added bootstrap by
npm install bootstrap
then finding the css files I want to use (they were in /node_modules/bootstrap/dist/css/) and importing them in the beginning of App.svelte:
<script>
// build/extra.css is fed from css files imported here
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap/dist/css/bootstrap-grid.min.css";
Open Questions
Rollup does not seem to handle the sourcemaps that are mentioned in bootstrap.min.css and bootstrap-grid.min.css. So when I open the developer tools I get a warning about not being able to load the sourcemaps