I installed gatsby cli and created a basic node / gatsby.js project.
The tutorial says "Gatsby works out of the box with CSS Modules."
I also wanted to use custom css properties as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
(1) I created src/layouts/variables.css and put in css with custom properties, like:
:root {
--brand-color: #ff3333;
}
(2) Then in src/layouts/index.css I added #import './variables.css' at the very top of the css file.
(3) because of the #import in the above step, I installed and added postcss-import as the first plugin, in my gatsby-config.js file. Not sure if this is correct, as it isn't named 'gatsby-plugin-*' like the other plugins.
(4) in my footer component (src/components/Footer) I have both index.js and index.module.css. In the index.module.css I put:
.footer {
color: var(--brand-color);
}
... thinking that --brand-color will cascade via imports through src/variables.css -> src/index.css -> src/index.js -> layouts/index.js -> my footer component.
But when I run gatsby-develop, it says:
warning in ./src/components/Footer/index.module.css
postcss-custom-properties: /path/to/src/components/Footer/index.module.css:2:3: variable '--brand-color' is undefined and used without a fallback.
How can I fix this error? It does not allow the website to display properly.
OK I figured out what I was doing wrong:
Every (.module).css file that needs to use the "global" variables.css file must import it explicitly.
Adding #import '../../layouts/variables.css'; to my component's css file fixed this.
Related
I have a custom page in Admin Bro with the name of gallery. Now in their I want to import some css that I wrote. I tried this:
import './gallery.css';
This does not seem to work for some reason. Is their any way I can add my custom css into my react component in AdminBro page.
Heres how I did it, note that I was use Express.js:
I was trying to customize the look of a table in my AdminBro pages, saw that there was already a admin-bro_TableBody css class and could override it based on below github issues:
https://github.com/SoftwareBrothers/admin-bro/issues/361
So I created a css file and make it publically accessible like so: https://stackoverflow.com/a/58046155/4297337
and then in my adminBro declaration, I did this:
const adminBro = new AdminBro({
assets: {
styles: ['/css/admin.css'],
},
...
}
The css file I created was called admin.css, the adminBro pages will automatically grab it, you can name the css file whatever you want as long as it is in the public/css/... folder in your root directory of your project
What my CSS file looked like:
.admin-bro_TableBody {
max-width: max-content;
word-break: break-word;
}
I am using marp-cli to create lecture slides.
In order to fine tune the slide content, I have created a custom-css that extends some style rules implemented in the marp default css template.
My objective:
I want to externalize the css rules in acustom-theme.css file and remove them from the .md-document in which the slide's content resides.
The problem:
When calling the custom-theme.css using marp-cli with the --theme-set option, I can not specify that my css "extends" the style rules of the default template.
The question:
How can I specify that my custom-theme.css is defined on the basis of the marp default template?
Thanks in advance for the support.
In case other users experience the same issue, the solution to the problem is stated here in form of an example – provided by Yuki Hattori (the main developer of the marp toolset):
Marp: Markdown.md
---
theme: custom-theme
---
# Hello, world!
/* custom-theme.css */
/* #theme custom-theme */
#import 'default';
section {
/* Override default background */
background: #def;
}
Marp-cli:
marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- mymarkdo
see also:
https://github.com/marp-team/marp-cli/issues/266
There is an on-the-fly theme rendering in VS Code without the need of the CLI.
install the marp-team.marp-vscode extension
paste the below snippet into .vscode/settings.json
change your *.css paths and styles accordingly
// Please put `.vscode/settings.json` on your workspace
{
"markdown.marp.themes": [
"https://example.com/foo/bar/custom-theme.css",
"./themes/your-theme.css"
]
}
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
In my Nuxt app I load all my SASS thus:
css: [
'~assets/scss/main.scss'
],
It works perfectly, except when I'm trying to use some SASS variable from within a component.
<style lang="scss">
.container {
background-color: $white;
}
</style>
In this case I get this error message:
SassError: Undefinied variable: $white
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
It is as if the app as a whole knew these files, but each individual component doesn't.
What's going on?
Most of the other answers don't take into account that Nuxt.js hides all the Webpack setup and forces you to do everything through nuxt.config.js.
My guess is that Webpack isn't compiling all the SCSS declarations together and therefore can't find the variable.
It's been a few months since I had this issue so things may have changed but here goes...
Make sure you have the correct Node packages installed (Nuxt DID NOT do this by default for me) npm i -D node-sass sass-loader
Add your CSS & SCSS files to the css: [] section of nuxt.config.js Order matters here so make sure things like variables are added before things that use them if you have separate files.
If you're using layouts (I think that's the default Nuxt setup) make sure that layouts/default.vue has a <style lang="sass"></style> block in it. If I remember correctly this can be empty but had to exist. I only have one layout but it may need to exist in all of them.
If all that seems like too much of a pain, there's a Nuxt Plugin that takes most of the work/management out of that process. Nuxt Style Resources Module
The confusing part is that:
styles from scss files CAN be loaded like this
//nuxt.config.js
css: [
'~assets/scss/main.scss'
],
//global scss file
$varcolor: black
h1{background: $varcolor}
BUT
the variables inside CAN NOT be used inside a component
//inside component
.component {background: $varcolor} // DOES NOT WORK
I also suggest the use of the nuxt style resource module:
https://github.com/nuxt-community/style-resources-module
new founded solution, checked and it's work. Founded here
add #nuxtjs/style-resources
export default {
css: [
'vendor.min.css'
],
modules: [
'#nuxtjs/style-resources'
],
//You will have to add this new object if it doesn't exist already
styleResources: {
scss: ['./assets/scss/main.scss'] // here I use only main scss with globally styles (variables, base etc)
},
}
it's strange, but if u change tilda (~) to dot(.), it's help for someone
from css: [ '~assets/scss/main.scss' ] to css: [ './assets/scss/main.scss' ]
this solution finded here
Us should either load the scss in your component
<style lang="sass">
#import 'path/to/your/_variable.scss'; // Using this should get you the variables
.my-color {
color: $primary-color;
}
Or adding the following to you to your vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "#/pathto/variables.scss";`
}
}
}
};
Ref:
SassError: Undefinied variable: $white
Each <style lang="scss"> is compiled individually. You need to #import the file which defines $white into your component before the parser knows what $white means.
This is why most frameworks keep their variables in a _variables.scss file which is imported in all the other SCSS files/contexts.
The _variables.scss is not even loaded in the page, because in most cases it doesn't actually contain any rules. It only contains variable definitions which are imported into other .scss files, which output .css.
Ref:
Yet, all of the SCSS contained in the SASS file where the variable is defined works throughout the app.
If you import an SCSS file in your vue.config.js the output will be an ordinary <style> tag. Its contents will be generated at compile/build time and will result into some CSS (which apply to the entire document).
Unless specifically imported into the component SCSS, (using an #import command), the compiler will not know what $white means.
There is an important distinction to make between compilation context and browser context. Compilation happens at compile time (most likely in node-sass). Browser context is the actual browser, which only understands the CSS resulted from compilation.
How does Vue only apply style rules to the parent and not to the children with the same class? That's achieved by scoping.
It means applying a custom data-v-{key} attribute to all selectors in the generated <style> tag and to all elements the style should apply to.
See this example and inspect it using your web console: https://codesandbox.io/s/vue-template-ge2hb
It produces this markup:
As you can see, the scoped CSS has an extra [data-v-763db97b] added to the selector, which means it only applies to elements having that data attribute.
I want to extend the theme used by Sphinx and ReadTheDocs with my own custom styles.
What is the best way I can do this so that my changes will stick?
Edit: as of 2021 the following answer is outdated, please use html_css_files = [] in your conf.py instead of using the application API after version 1.8 (current Sphinx version at time of writing is 4.1.1). The add_stylesheet option below has been renamed add_css_file in version 1.8, and seems more intended for Sphinx extension developers.
Assumptions
Your RTD doc set has something like the following structure:
(root path)
(some other stuff not germane to this discussion)
_static/
_templates/
conf.py
You're also building locally using sphinx-build or sphinx-autobuild using the default theme, but your deployed server might use the sphinx-rtd-theme instead.
Use Case: Hatnotes
For this illustration, I'm going to show how to create custom styling for "hatnotes", a concept which is prevalent in MediaWiki docs and which corresponds roughly to the admonition construct in RST. You can apply what's shown here to create any custom CSS and include it in your doc set.
Step 1: Create Custom CSS
The custom CSS file should go somewhere under the _static/ directory, as that's where the build process and scripts will find it. I would encourage a css/ subdirectory, since you might have other customizations to add, like JavaScript files.
Create your custom CSS file and put it in this directory. Write your style specifications as an overlay to whatever might already exist in the theme you'll be using in the build. Also don't assume anything about whether your style will override an existing style in the theme, as you can't guarantee when your styles will be added in relation to the default ones.
Here's my custom CSS for hatnotes. I saved this at _static/css/hatnotes.css.
.hatnote
{
border-color: #c8c8c8 ;
border-style: solid ;
border-width: 1px ;
font-size: x-small ;
font-style: italic ;
margin-left: auto ;
margin-right: auto ;
padding: 3px 2em ;
}
.hatnote-gray { background-color: #e8e8e8 ; color: #000000 ; }
.hatnote-yellow { background-color: #ffffe8 ; color: #000000 ; }
.hatnote-red { background-color: #ffe8e8 ; color: #000000 ; }
.hatnote-icon { height: 16px ; width: 16px ; }
Step 2: Add Styles to Templates
For the default theme, it is sufficient to create a template that overrides the default layout.html to add your custom CSS to the layout. Use of templates is well documented at sphinxdoc.org. In your override template, simply set the css-files variable (an array) with an appended list of your custom CSS files.
Here is my template which adds the hatnotes CSS. I saved this as _templates/layout.html.
{% extends "!layout.html" %}
{% set css_files = css_files + [ "_static/css/hatnotes.css" ] %}
That's all you need to do for the default theme. For the Sphinx/RTD theme, there's an additional step, where you…
Step 3: Add Stylesheets to the Theme
For the Sphinx/RTD theme, your template will be ignored. Instead of using the template mechanism, you have to add a function to your conf.py file which adds the CSS file to the app's theme. Somewhere near where your conf file sets the html_theme attribute, add something like the following:
def setup(app):
app.add_stylesheet( "css/hatnotes.css" )
Note that, this time, there's no _static/ at the front of the path; the add_stylesheet() function assumes that part of the path.
Finishing the Use Case
Now that you've set up your custom styles for both the default theme and the Sphinx/RTD theme, you can actually use them in your doc.
Following the usual paradigm of defining stock hatnotes as "templates" in MediaWiki (sorry, not the same as templates in Sphinx and RTD), I set up an includes/ directory where all my hatnotes would be stored.
Here's how to construct a hatnote with the custom style information. This file is includes/hatnotes/stub-article.rst.
.. container:: hatnote hatnote-gray
|stub| This article is a stub. Please improve the docs by expanding it.
.. |stub| image:: /images/icons/stub.png
:class: hatnote-icon
Here we set up our "stub" hatnote to have the default hatnote styling, the gray background, and use a "stub" icon as the inline image, with the hatnote-icon style applied to that image.
Now we can use the file as an included resource in a document.
Foo Article
===========
.. include:: /includes/hatnotes/stub-article.rst
Blah blah I haven't written this article yet.
Whether you're using the local default theme or the Sphinx/RTD theme, the hatnote will be rendered with the styles you added by setting up the _templates/layout.html template and the conf.py script to both include the custom CSS file you put under the _static/ directory.
End State
Your doc repository now has this stuff in it:
(root path)
_static/
css/
(custom CSS files…)
_templates/
layout.html — (adds your custom CSS to the default layout)
conf.py — (with new function to add custom CSS to app's theme)
I don't know which is most "official" but if you go to the "customisation" page of the Furo theme (developed by one of the Sphinx developers) and then scroll to "Custom CSS Files" it links to a guide to "injecting code" which in turn simply links out to ReadTheDocs's page on Adding Custom CSS which does not suggest running Python code (as the answers above do) but setting a conf variable, which seems better.
html_css_files = [
'css/custom.css',
]
Adding to the accepted answer: There are various other approaches for this, e.g. adding to footer or adding to extrahead. The latter is recommended by the RTD docs.
Also I found the setup() function was never necessary, as long as you have html_static_path = ['_static'] in your conf.py.
Note that normally, you should replace the absolute path [ "_static/css/hatnotes.css" ] with [ pathto("_static/css/hatnotes.css", True) ] or the style sheet will not be loaded for RST files inside subdirectories, but it is evidently unnecessary for the accepted answer. Not sure why.