Develop Reference

Next.js production build doesn't apply css variables

I have the next postcss config
module.exports = {
plugins: [
[
'postcss-preset-env',
{
browsers: 'last 2 versions, IE 11, not dead',
preserve: false,
features: {
'custom-media-queries': true,
'custom-properties': true,
'nesting-rules': true
},
importFrom: ['src/styles/variables.css']
}
]
]
}
And this file with css variables
#custom-media --desktop screen and (min-width: 768px);
#custom-media --mobile screen and (max-width: 767px);
:root {
--montserrat: montserrat, sans-serif;
--sfProDisplay: sf pro display, sans-serif;
--helvetica: helvetica, sans-serif;
--blue: #315efb;
--middleBlue: #2c54e2;
--darkBlue: #274bc8;
--lightBlue: #e0ebff;
--green: #21a038;
--grey: #62687f;
--darkGray: #343b4c;
--blueGray: #8d96b2;
--cloudGray: #f3f4f7;
--cloudGray7: #afb6c9;
--darkCarbone: #1f2431;
--paleYellow: #fffde5;
--red: #ff564e;
}
After i built my project via next build && next export, colors are not displayed correctly. For example, color: var(--blueGray), instead color: #8d96b2. Has anybody idea what's wrong?

I believe you should import your CSS variables directly in your styles section and not in config. but I might have got you wrong

Global CSS needs to be included in the /pages/_app file.
From the Adding a Global Stylesheet
documentation:
To add a (global) stylesheet to your application, import the CSS file within
pages/_app.js.
(...) In development, expressing stylesheets this way allows your
styles to be hot reloaded as you edit them—-meaning you can keep
application state.
In production, all CSS files will be automatically concatenated into a
single minified .css file.
Make sure you import the file where the CSS variables are defined in your custom _app.
import '../styles/globals.css'
import '../styles/variables.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;

This may not be worth the bounty but from NextJS docs.
CSS variables are not compiled because it is not possible to safely do
so. If you must use variables, consider using something like Sass
variables which are compiled away by Sass.

SCSS external Link to styling component in LitElement

The purpose of the web components is to encapsulate all HTML/CSS/JS in one place, but I must use general SCSS files, that have a lot of variables such as color, font size and a lot of other stuff. It's a design system and it's always changing. Is there a plugin or a way to solve this problem?

If the purpose of those Sass files is to only expose some variables then probably the smartest thing to do is converting them to CSS custom properties: they're the recommended and most effective way to theme WebComponents.
#use 'sass:meta';
#use 'variables-file-1'; // Import the variable files
#use 'variables-file-2'; // as Sass modules
// ...
#mixin export-vars($module-name) {
// Use module-variables() to extract a name-to-value map of the
// variables declared in the module identified by $module-name
#each $name, $value in meta.module-variables($module-name) {
--#{$name}: #{$value}; // Define an equivalent CSS custom prop
}
}
:root {
#include export-vars(variables-file-1);
#include export-vars(variables-file-2);
// ...
}
You can then import the compiled CSS (a normal <link> in index.html is fine in most cases since CSS custom properties cross shadow DOM boundaries) and use the variables in your components:
import { LitElement, html, css, customElement } from 'lit-element';
#customElement('my-component')
export class MyComponent extends LitElement {
static styles = css`
:host {
color: var(--my-var, <fallback-value>);
}
`;
}
With this said, if you need to share styles between LitElements, that is possible as well.

Refer SCSS variable value in HTML or TS file in Angular

I was doing the research if it is possible to use the SCSS variable value in HTML or TS in Angular.
For example
I have a variable called $mdBreakpoint: 992px; inside _variable.scss file
In html I have a condition
[ngClass]="{'col-sm-3': innerWidth >= 992}"
992 is the same value as the $mdBreakpoint
My question is it possible to refer $mdBreakpointin HTML condition.
I am using Angular 8

It's not directly supported by Angular, html or sass. You can't access scss variables in a html template without writing some logic.
See this answer if you want more information on how to do it: access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)

You can create a variable which holds value of mdBreakpoint and then use it HTML template:
TypeScript:
mdBreakpoint = 992;
HTML:
[ngClass]="{'col-sm-3': innerWidth >= mdBreakpoint }"
UPDATE:
It seems that there is no way to access SASS now, but if you want to have a something like global variable, then you can create your variable in environment.ts file and use in any component:
export const environment = {
production: false,
MD_BREAKPOINT: 992
};
and in your component:
export class YourComponent {
title = 'myapp works!';
mdBreakpoint = environment.MD_BREAKPOINT;
}

Import variables from .ts into .scss angular

I am developing an angular component and I would like to import into my scss file variables (such as colors) from my ts file and I am going throught some issues.
I have seen some examples with node-sass and webpack but are not very clear to me.
Thanks

One option is CSS Variables.
This is not a SASS variable that is available in preprocessing, but rather something available in the browser during runtime. Therefore, you can get/set it with javascript, and the CSS style will update based on the variable value.
For instance, let's say your component allows you to set the text color through a javascript variable textColor:
CSS:
p { color: var(--text-color); }
JS:
element.style.setProperty("--text-color", textColor);
And if you want the flexibility/maintainability of variables in your SCSS -- you can have the variables point to the JS/CSS variables.
SCSS:
// _vars.scss
$text-color: var(--text-color);
// _styles.scss
p { color: $text-color }
Make sure to verify that this feature has the level of browser support your app needs.

have you tried ngStyle
<some-element [ngStyle]="{'color': styleExp}">...</some-element>
and then in your .ts
styleExp = 'red'
you can read more on it on the official docs
https://angular.io/api/common/NgStyle

It is not possible to import variables to scss files from the ts files. Instead, you can use angular angular properties ngStyle and ngClass

constructor(private elem: ElementRef){
this.colorValue = "yellow";
this.elem.nativeElement.style.setProperty('--text-color', colorValue);
}
then in the css or scss you can use --text-color variable
p { color: var(--text-color); }

I know this is old, but I would like to give an answer that people might be interest:
in example.component.ts
#Component({
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {
...
#HostBinding('style.--nameOfVar') nameOfVar = 'red';
...
}
in example.component.scss (or css)
.example {
color: var(--nameOfVar);
}

Render Transpiled ES6 in CSHTML

I have
Tutorial.jsx
class ShoppingList extends React.Component {
render() {
return (<div>Milk</div>);
}
}
export default ShoppingList;
webpack.config.js
module.exports = {
...
output: './React/bundle.js',
...,
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react'],
}
}
]
}
}
In my CMD prompt, when I run webpack -w everything is green and I see my bundle.js file appearing where it should, in the React folder. Opening it, I see
...
var ShoppingList = function (_React$Component) {
...
}
...
so it looks like that's all good.
Now I want to render ShoppingList in my _Layout.cshtml file.
Question: How do I do this? I've tried all methods below and get React errors all the time about invalid parameter type, or passing in the wrong element, or whatever. My CSHTML is below.
<div id="content1">render here</div>
....
<script src="~/React/bundle.js"></script>
<script>
ReactDOM.render("ShoppingList", document.getElementById("content1"));
ReactDOM.render(ShoppingList, document.getElementById("content1"));
ReactDOM.render(<ShoppingList />, document.getElementById("content1"));
</script>
Can someone please let me know if
It's possible to NOT have a ReactDOM.render() inside the JSX file and,
It's possible to do what I want to do which is render my ShoppingList in CSHTML
The best results I've got so far is to see ShoppingList in my DOM explorer but no HTML was actually rendered. It came out <shoppinglist ...></shoppinglist> which appears wrong to me.
Thanks.

You should have this inside your entry file:
import ShoppingList from 'path-to/ShoppingList';
ReactDOM.render(<ShoppingList />, document.getElementById("content1"));
In the CSHTML page the additional script tag is not required.
Your original example does not work because:
ShoppingList is not exposed globally (exporting as default does not make it global).
JSX syntax (<ShoppingList />) needs to be transpiled before it can be used in HTML page.
If you really need to use a component within a CSHTML page, you can make the component global:
window.ShoppingList = ShoppingList
inside the file that defines the component.
And use vanilla javascript instead of JSX syntax:
ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))