I am using Magento 1.9 and I am trying to edit the background color of the megamenu.
I navigated all the way to the .scss file but found a $menu-background at the place of the color hex..
.main-menu {
position: relative;
top: 0;
width: 100%;
left: 0;
z-index: 99;
background-color: $menu-background;
&.isStuck {
z-index: 9990;
.nav .grid-full > li > a > span{
margin: 10px 30px;
}
.nav .grid-full > .parent > a > span:after{
top: 80%;
}
}
}
at the beginning of the same scss file there was
#import "../includes";
so I searched for that file and found:
#import "var";
in that last file I found:
// Accent Colors
$accent-color-1: #ee372a;
$accent-color-2: #000;
$accent-color-3: #fff;
//Menu
$menu-background: $accent-color-2;
$menu-item-color: #888888;
$menu-item-color-act: #ffffff;
$menu-item-bg-act: #232323;
I edited the accent color 2 as follows : (blue instead of black)
$accent-color-2: #00427A;
However now no matter how much I refresh the page , press CTRL + F5, flush the cache from magento -> System Cache Management. I cannot see the color changing to blue. I searched a lot but couldn't find a solution.
I then realized that the files i edited were scss files and not css (I have very low knowledge about scss files).
The big issue now is to convert edited scss files into css files.
I tried:
-scout
-koala
-npm sass
and in all cases the #import is failing and the css is messing up.
Is there a button to easily compile sass to css in magento or another way to do it that would not mess the css when it finds an #import?
Magento 1 has no built-in scss compiler. You will have to compile them manually or check if your theme has some built-in module for this task.
you can obtain a compiler from npm
npm install -g sass
or get standalone one
https://github.com/sass/dart-sass/releases
the compilation process is easy. just find the source scss and specify the target file
sass source/<file>.scss skin/frontend/<theme-name>/default/css/<file>.css
Try using thos documentations for enabling SCSS in magento:
https://www.gomage.com/magento-2-pwa/resources/magento-pwa-documentation/tutorials/enable-sass-less-support/
or try this one:
https://www.gomage.com/magento-2-pwa/resources/magento-pwa-documentation/tutorials/enable-sass-less-support/
Related
I'm a backend developer tasked withed moving a front end from a custom framework to React. (Spare a thought for me please).
I've come across CSS classes within other CSS classes such as:
content.document{
display: flex;
.important{
background-color: #FAD08A;
padding: 20px 0;
border-radius: 5px;
position: relative;
img.important{
width: 70px;
float: right;
}
h2 {
font-size: 16px;
color: #ccc;
text-align: center;
line-height: normal;
}
}
}
I have never seen this way of doing CSS and of course if I paste it into a normal CSS file, it doesn't work.
Is there a library that would all me to have CSS classes defined within other CSS classes (such as how h2 is defined in .important above)? I'd rather not have to modify tons of CSS to get this to work.
This is sass. There is sass and scss syntax. The one you have above is scss. They have .scss or .sass file-types. Sass-Variant drops the brackets and works with indents alike CoffeeScript or YAML.
Since you are using React now, you can just install a "sass" package with yarn add or npm install command. There are different versions of sass because of legacy and different environments. You can decide if you want to install it locally (per project) or globally (-g flag for npm).
Usually, I go with the package named sass. You could probably also use dart-sass. If you want to get fancy: more-details-about-sass-variants.
You can read more here: https://create-react-app.dev/docs/adding-a-sass-stylesheet/.
This tool supports sass and scss with different setups: sass playground
As Jon mentioned, it is written in SCSS. You can try to use an online tool that converts SCSS to CSS.
The issue:
Using the out-of-the-box react-scripts package included with create-react-app to build a production build of React, dynamically imported CSS files get ignored and instead all CSS seems to get compiled into the production build.
Example of what is happening:
/* styles/desktop.css */
.some-class {
background-color: white;
margin: 0;
}
/* styles/mobile.css */
.some-class {
border: 1px solid black;
margin: 1em;
}
.another-class {
background-color: black;
padding: 3px;
}
Note we are using require() with template strings as the import statement only accepts string literals and cssEnv could be any number of things which would make a conditional statement untenable.
/* config.js */
const cssEnv = 'desktop';
require(`./styles/${cssEnv}.css`);
We build our production build.
$ npm run build
In the build folder, we find our compiled CSS. Note how all our CSS files have been compiled into one (including even CSS we never imported).
/* compiledCSS.chunk.css */
.some-class {
background-color: white;
border: 1px solid black;
margin: 0;
}
.another-class {
background-color: black;
padding: 3px;
}
A similar SO question I found in Googling for a solution:
react-scripts build ignores conditional css imports
I'm immediately answering my own question because I've already solved it, but also because I had a bit of a Homer Simpson "d'oh!" moment when I finally found the solution after scouring Google and documentation far and wide. This is why I posted the question, in hopes of saving other people that time searching for a solution that wasn't super obvious (and doesn't seem to be addressed anywhere that I have found).
So I didn't realize that the import statement had a dynamic importing functionality via import(). So the solution was simply to replace require() with import().
/* config.js */
const cssEnv = 'desktop';
import(`./styles/${cssEnv}.css`);
Now when we build our production build, we get the correct compiled CSS
/* compiledCSS.chunk.css */
.some-class {
background-color: white;
margin: 0;
}
So my best guess as to what is happening is that react-scripts treats require() differently than import(), where providing a template string with variables to require() causes the variables to act like wildcards (*). So when we were building the production build earlier,
require(`./styles/${cssEnv}.css`);
got treated like
require(`./styles/*.css`);
Hence all css files in the styles folder were compiled together.
I'm not entirely sure of the intimate inner workings of what is happening here, so I wouldn't mind getting input from folks like Dan Abramov and others who might better understand what exactly is happening to clarify this.
I'm having problems getting css background images showing when using webpack.
I have the following css class:
.fb {
display: block;
width:30px;
height: 30px;
background-color: red;
background-image: url('../images/icons/facebook.png');
}
Usage (Using React so className not class):
<div className="fb"></div>
Below is an image of my 'web_build' folder where webpack bundles all my files into. Highlighted is the culprit image.
The following is the bundles SCSS files which I see in the Network tab of chrome dev tools. No images files show on the 'Img' tab.
.fb {
display: block;
width: 30px;
height: 30px;
background-color: red;
background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png);
}
All I see rendered is a 30x30px red square.
NOTES:
If I directly reference the image using an <img> tag, the image shows.
I'm using webpack-dev-server
I'm using image-webpack-loader with the following configuration
{
test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
Let me know if any other information is needed.
Thanks.
After some more searching around it turns out that including sourceMap in my CSS/SASS bundling breaks relative image URLs in CSS.
Solution: Turn sourcemaps off or specify a fully qualified publicPath URL.
The following worked for me.
publicPath: 'http://localhost:8080'
More information here
https://github.com/webpack/style-loader/issues/55
The image-webpack-loader only compresses the images using imagemin.
Use url-loader or file-loader to load the file into your css.
I am using twitter bootstrap v 3.0 RC1 and I installed node and npm to compile less to css when I save the less file.
I include the bootstrap.css file into my html head, when I save the bootstrap.less, it compiles it into css like you would expect.
I created another .less file, (theme.less) within the same bootstrap/less directory where bootstrap.less resides with all the imports, thinking it would include those styles too, but it keeps giving me the following error when I try to compile the theme.less file:
NameError: .make-column is undefined in /path/to/assets/bootstrap/less/theme.less
/* ------- Theme styling ------- */
.content-body {
.make-column(10);
}
I assume it is undefined since theme.less does not have a clue the .make-column mixin is, I am new to this so I am trying to figure out how to do this correctly, thanks
Your code works (on linux)
create theme.less as above
add #import "theme.less"; at the end of bootstrap.less
compile by running grunt dist in your bootstrap folder or lessc bootstrap.less in your less folder
The result, the last lines of bootstrap.css contain:
/* ------- Theme styling ------- */
.content-body {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 768px) {
.content-body {
float: left;
width: 83.33333333333334%;
}
See also: Twitter's Bootstrap 3.x semantic mobile grid
I'm running into problems with WordPress style.css files when trying to use then as .styl -files. The style.css from twentytwelve is the only one so far that works when I just change it from .css to .styl.
So for example when I copy-paste the style.css from theme twentyeleven or Nimble by ElegantThemes to a .styl -file, it won't compile and I get an error from CodeKit:
ParseError: /Applications/MAMP/htdocs/test/wp-content/themes/twentytwelve-child/style.styl:1454
1450| }
1451| article.feature-image.small .entry-summary p a {
1452| background: #222;
1453| color: #eee;
> 1454| display: block;
1455| left: -23.8%;
1456| padding: 9px 26px 9px 85px;
1457| position: relative;
expected "indent", got ";"
If I delete all the CSS from around it, the error just jumps to a different line of code.
I also get similar errors if I use css2stylus.com to make Stylus from CSS.
So for you people wiser than me:
How would one go about debugging Stylus? Is there a smart method for that? What if it's just copy-pasted CSS, and what if it's been compiled to .styl?
Any way to just make the style.css -files work by not compiling, other than loading separate files using one made with Stylus and the original CSS?
Do you think that this kind of problems are less likely to happen with i.e. SASS?
So for anyone using Stylus with WordPress, it would be very nice to share some thoughs!
Thank you very much.