I have a problem while trying to do a very basic thing with sass.
I just have the following file structure:
Styles folder:
└───src
├───styles
│ └───_variables.scss // here I have only a variable
| └─── sharedStyles.scss // here are all my vars
|
├─ App.tsx // Where I usee the style
The _variables.scss has only the following:
$my-Blue: #04284D;
And here is my sharedStyles.scss
#import "variables.scss";
.App {
text-align: center;
}
.App-header {
background-color: $my-blue;
height: 150px;
padding: 20px;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
When I compile it I always get the same error:
"message": "Undefined variable: \"$my-blue\".",
"formatted": "Error: Undefined variable: \"$my-blue\".\n on line 8 of src/styles/sharedStyles.scss\n>> background-color: $my-blue;\n\n
I know is pretty basic but I could not understand what's going on here.
Related
I'm combining tailwindcss with another ui framework (Ant Design), but having some conflicts with the css in tailwind.
I want to compile the necessary classnames if it is used to minimize conflicts
My expect example:
<div className="text-center font-bold" />
After compiled in output.css file:
.text-center {
text-align: center;
}
.font-bold {
font-weight: bold;
}
which this output results should not included css default like:
html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}
.text-center {
text-align: center;
}
.font-bold {
font-weight: bold;
}
Just disable Preflight
// tailwind.config.js
module.exports = {
....
corePlugins: {
preflight: false,
}
}
I need to change the colors theme of my app according to a parameter and it should be a very simple operation. In my app I use a Fuse angular material theme. When I try to switch from the primary to the secondary theme, the accent color of the dialog component does not change while the other components (for example the navigation bar) do.
_theme.scss
#import '~#angular/material/theming';
#import './component-themes';
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
$white: mat-palette($mat-white);
$black: mat-palette($mat-black);
$first-theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($first-theme, background);
$foreground: map-get($first-theme, foreground);
#include angular-material-theme($first-theme);
#include component-themes($first-theme);
$second-primary: mat-palette($mat-fusedark);
$second-accent: mat-palette($mat-green, 600, 400, 700);
$second-warn: mat-palette($mat-red);
$second-theme: mat-light-theme($second-primary, $second-accent, $second-warn);
.second-theme {
#include angular-material-theme($second-theme);
#include component-themes($second-theme);
}
component-theme.scss
#import "../partials/navigation";
#import "../partials/dialog";
#mixin component-themes($theme) {
#include navigation-theme($theme);
#include dialog-theme($theme);
}
_dialog.scss
#import '~#angular/material/theming';
#mixin dialog-theme($theme) {
$accent: map-get($theme, accent);
.dialog-wrapper {
.mat-dialog-container {
padding: 0;
overflow: hidden;
}
.mat-dialog-title {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
margin: 0;
padding: 24px;
}
.mat-toolbar {
background-color: mat-color($accent) !important;
}
.mat-dialog-content {
padding: 16px 32px 0px;
margin: 0;
}
.mat-dialog-actions {
display: flex;
flex: 1 1 auto;
margin: 1px 0 0 0;
padding: 0px 32px 16px;
}
}
}
If I change in the _dialog.scss the value
background-color: mat-color($accent) !important;
into
background-color: green !important;
it works properly. It looks like mat-color($accent)does not work but only for the scss of this component.
For who runs into this problem, I have finally found a solution. I could not change the theme of some components because they are nested and the overlay container blocks the theme propagation. In order to fix it, I imported the overlayContainer and add the theme class into the overlayContainer in the ngOnInit method.
import {OverlayContainer} from '#angular/cdk/overlay';
constructor(
private overlayContainer: OverlayContainer
) {}
ngOnInit() {
if (this.data.theme === 'second-theme') {
this.overlayContainer.getContainerElement().classList.add(this.data.theme);
}
}
Very easy solution when you know what is the problem, the hard part was to find it out :)
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.
In gruntfile
stylelint: {
all: ['app/styles/**/*.scss']
},
.stylelintrc
{
"plugins": [
"stylelint-selector-bem-pattern"
],
"rules": {
"plugin/selector-bem-pattern": {
"componentName": "[A-Z]+",
"componentSelectors": {
"initial": "^\\.{componentName}(?:-[a-z]+)?$",
"combined": "^\\.combined-{componentName}-[a-z]+$"
},
"utilitySelectors": "^\\.util-[a-z]+$"
}
}
}
/Users/jitendravyas/app-test/styles/components/_campaign-settings-integrations.scss
/* #define campaign-settings */
.campaign-settings__integrations {
#include flex;
}
.campaign-settings__integration {
border: 1px solid $color-green;
border-radius: 3px;
color: $color-green;
margin-right: $base-spacing-unit;
#include flex;
.check {
background: $color-green;
color: white;
#include vertical-center;
}
> div {
padding: $half-spacing-unit;
}
}
Not getting any error when I run stylelint. Stylelint is working with other rules.
I believe you have incorrectly defined your component name. As such, the linter is correctly skipping over the file.
You must use either a concise or verbose syntax:
/** #define campaign-settings */
or
/* postcss-bem-linter: define campaign-settings */
At the moment you appear to use an invalid form of the concise syntax i.e. your comment begins with /*, rather than /**.
I have tried to compile multiple themes using same files. My folder structure is as below
-styles
green.scss
red.scss
-scss
-control1.scss
-control2.scss
I need the output of both control1 and control2 css files based on green and red themes.
var gulp = require('gulp');
var sass = require('gulp-sass');
var config = {
includePaths: [
'./styles/green.scss',
'./styles/red.scss'
]
};
gulp.src('./styles/scss/*.scss')
.pipe(sass(config).on('error', sass.logError))
.pipe(gulp.dest('./style/css/'));
I am new in gulp-sass and any one please suggest is there any option available in gulp-sass or node-sass to generate multiple themes?
I need to get the output as
-styles
-css
-green.control1.css
-green.control2.css
-red.control1.css
-red.control2.css
I would change the organization of your files to the setup below. I'll explain the new files next:
-styles
main-green1.scss
main-green2.scss
main-red1.scss
main-red2.scss
- colors
- green.scss
- red.scss
-controls
-control1.scss
-control2.scss
As for those new .scss files. Each file would import a color file and a control file. For example, main-green1.scss would be:
#import 'colors/green';
#import 'controls/control1';
And main-green2.scss would be:
#import 'colors/green';
#import 'controls/control2';
As long as the variable names in green.scss and red.scss are the same you'll end up with the desired result. Here's a more detailed example:
green.scss
$color: #00cc00;
$background: #003300;
red.scss
$color: #e50000;
$background: #330000;
control1.scss
body {
background-color: $background;
color: $color;
}
control2.scss
body {
background-color: $color;
color: $background;
}
You would change your Gulp script to build the new main- files. The compiled files would be:
main-green1.css
body {
background-color: #00cc00;
color: #003300;
}
main-green2.css
body {
background-color: #003300;
color: #00cc00;
}
main-red1.css
body {
background-color: #e50000;
color: #330000;
}
main-red2.css
body {
background-color: #330000;
color: #e50000;
}