how to override your css ?

[jphconstantin]

Hello again,
Day after day I progress in the knowledge of your theme ...
Now I would like to add my own styles (css) without touching yours in case you update them later.
I did that:

• I copy in my assets/css dir your main.scss file.
• In the copied file I added at the end @import "my_style";
• I created in my _sass dir a file called my_style.scss and I inserted my own styles.
  But I have this message:
  invalid css after @import my_style expected { ... instead of ;
  I tried to get rid the plugins but no effect.

Is my method correct ?

Rgds,

[iBug]

Can you share some examples? Like a link to your repository so we can take a further look.

[jphconstantin]

For the moment, I am working locally.
Do you want a copy of my file ?

[jphconstantin]

.jpc_img {
img {
border:2px solid white;
border-radius:8px;
padding:2px;
}
}
and, in my posts:

...

[iBug]

Looks all right to me. We can't diagnose your issue before we can examine it. Is there a live sample where this can be reproduced?

[jphconstantin]

No, no live sample.
The theme uses main.css defined in head.html. I searched another solution on the web:

• I created a file mystyle.scss in /assets/css/ dir
• I edited it:

---

---

@import "{{ site.theme }}";
@import "mystyle";

And now it works ! I don't know where was my errors in my first approach.
But ...
In _config.yml I declared minimal_mistakes_skin to dark but this is not taken into consideration.
That means my second approach disturbs the theme.

If you cannot help with this then forget my question. I hope the the author could read my message and explain how to override his css file (or rather how to add styles without modification of his files).

[iBug]

It's actually covered pretty well in the documentation: https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#customizing. Maybe you should try following it first.

In case you need working samples, you can checkout my website for some. Here's assets/css/main.scss and the included _custom.scss.

Also, it helps if you format your replies properly with Markdown, like wrapping code in code blocks. This makes it easier to read and understand.

Finally, I'd like to reiterate this:

We can't diagnose your issue before we can examine it.

[jphconstantin]

Thank you for your advices.
I read this link. If the author changes the content of his styles then I will not see the modifcation because I will have a copy. That was the goal of my question: to keep the benefit of the changes.

[iBug]

Please examine it carefully. The whole content of the main.scss file provided in the theme is as follows:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

The actual styles are located in the _sass directory, which will not be overridden unless you put something with an identical name there.

So you do not have a copy of all the theme styles, just a copy of "the loader" / "the index" which very rarely changes.

For a minimal example, place main.scss in your repository with the following content:

---
---

@charset "utf-8";

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

@import "custom";

And then write into _sass/custom.scss:

body {
    background-color: blue;
}

And then everything should be right.

[jphconstantin]

Great !!!!
Your solution is the best.
Thank you for your help.
rgds,