My goal is to import scss-classes using dynamic classes.
I've seem several usages such as in Ambar opensource, and wish to do something similar in my project.
// App.js
import classes from './App.scss'
...
<div className={classes.App}/>
// App.scss
.App {
text-align: center;
}
The Problem is that those css changes won't occur, using dev-tools I can see that none of the classes are a part of the HTML.
Changing the className='App', will work.
I've used the command npm install node-sass -S for the SCSS installation process.
I've found module called sass-loader that handle the request, but after completing the steps on their guide - it still won't work.
This structure is called CSS Modules. If you use create-react-app, apply these steps.
1) First install node-sass module.
npm install node-sass
2) Save your SCSS file with .module.scss extension. For example:
App.module.scss
3) Import this file like this:
import classes from "./App.module.scss";
4) Now, you can apply your styles like this:
<div className={classes.App}>
Related
Link to project picture
I am creating a project in react and needed bootstrap. But it is overriding my custom css. Some of default bootstrap changing my headings. I have tried everything like putting my css link below bootstrap and also importing it into my index.js file but nothing working. i have attached the picture of my project.
Try maybe using bootstrap as a dependency:
npm i bootstrap
and import in index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
or even try a react-bootstrap dependency
npm i react-bootstrap
Bootstrap is written with !important rules, so they has the highest priority if given!
Maybe you can try inline css in React elements (although not recomended in a simple HTML)
All the best!
As you haven't added any codes example or link of your live project, please check if CSS file has been linked properly. Go to page source and click on styles.css. It should open all your codes inside CSS file. If you can't open this file, or there's nothing found, you should check CSS file linking once again.
But if you can see css file properly but still not working, as a final option, you can use "!important" in CSS class. It will work fine.
Install bootstrap as npm package using npm i bootstrap. Then place your styles.css in the src folder and import styles.css in your App.jsx.
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css'
Or you can even try using !important. This will definitely work but you will need to to it every time you want to override a style.
As mentioned, bootstrap adds !important to seemingly everything. In order to remove all of them you'll need to install the npm package instead of linking to a CDN (like you're currently doing). So:
npm install bootstrap or yarn add bootstrap
Then create an app.scss (naming is arbitrary here) and add the following lines
$enable-important-utilities: false; //this disables !important
#import "../../node_modules/bootstrap/scss/bootstrap";
Then, import that app.scss file into your index.js file:
import './app.scss'
The next time your run npm start (or whatever command you're using) it should generate a new css file to use. You may need to install sass if your project isn't already using it. But, that's beyond the scope of this answer.
I first do this on the command line inside my Meteor project:
meteor npm install --save materialuze-css
This includes materialize to package.json.
Then, I added this to main.js:
import M from 'materialize-css';
But, this does not include the stylesheet to my project.
How to make this work as expected?
Use SCSS
Materialze is scss based, so you should use the scss compiler (but you are not forced to do, see the section below):
$ meteor remove standard-minifier-css
$ meteor add fourseven:scss seba:minifiers-autoprefixer
You also need to import the scss file:
import M from 'materialize-css';
import 'materialize-css/sass/materialize.scss'
Use plain css
If you only need the default css and don't intend to customize colors etc.
you may be fine by importing the dist css:
import M from 'materialize-css';
import 'materialize-css/dist/css/materialize.css'
No need to use the scss compiler then. Note, that you can safely use the materialize.css and don't require the materialize.min.css since it will be minified later when your Meteor app build for production using the standard-minifier-css.
I'm trying to import a sass partial (_variables.scss) to use in my main stylesheet (global.scss), but I keep getting the Error: Undefined variable. on sass compiling.
Directory structure:
app
└─public
└─styles
│ global.css (output for sass compiling is here).
└─sass
└─_variables.scss
└─global.scss
_variables.scss
$font-text: 'lato', sans-serif;
global.scss
#use '_variables';
body {
font-family: $font-text;
}
Looking at the Sass documentation, I understand to use #use instead of #import (which works) because they are phasing it out.
What am I doing wrong here? Thanks.
That's because you are not using Dart Sass which supports this feature.
Also in the documentation you will find:
Only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.
So use #import until #use is supported.
BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:
// ...
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
// ...
This is a very important update to the accepted answer by #llobert. After hours of searching, it turns out node-sass relies on libsass which is the C++ implementation of sass. According the docs for the libsass repository this C++ implementation has been deprecated.
Okay, so you may think, as easy as installing dart-sass, however you will find the docs have fallen behind here as well. If you go to dart-sass on npm you'll find:
So what you have to do now is:
npm install sass
And just in case, like myself, the reader of this is researching the whole sass affair because they are using gulp-sass:
At the bottom of the gulp-sass npm page you will find this tid bit.
Ah, what do you know. The default hasn't changed, but the underlying libsass libary has fallen behind due to depreciation. Thus you must add this to your gulp file:
var sass = require('gulp-sass');
sass.compiler = require('sass');
So long story short, there are some changes going on in the SASS world that have been drastic, but yet seemingly happened very quietly. I hope this recount of my last few hours will save some future devs a lot of time searching till the docs get sorted out.
Short Answer
You can access variables, functions, and mixins from another module by writing < namespace >.< variable >, < namespace >.< function>()>, or #include < namespace >.< mixin >(). By default, the namespace is just the last component of the module’s URL.
That means by using variables.$font-text
global.scss
#use '_variables';
body {
font-family: variables.$font-text;
}
SASS Documentation on Loading Members
Long Answer
So the answer or #llobet was using webpack and the answer of #Jamie Marshall was using gulp file, but I was trying to use SASS using Node JS and needed a step by step guide to make it work.
Here is how I made #use work - Step by step guide using Dart Sass with Node JS.
1. Create New Node Project
npm init
2. Install Dart SASS
npm i sass
Optionally you can also install AutoPrefixer using npm install postcss-cli autoprefixer
3. Configure NPM Script to Compile SASS
In Package.json, add script compile:sass to compile sass to css
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "sass --watch scss:assets/css"
},
4. Create SCSS folder and inside it create style.scss file
Above script compile:sass expects a folder called scss on the root of the project and a .scss file inside that folder
Paste the following inside .scss file
#use '_variables';
body {
font-family: variables.$font-text;
}
5. Create Partial file _variables.scss
Create a partial file named _variables.scss on the same directory scss and paste the following code in it
$font-text: 'lato', sans-serif;
6. Compile SASS to CSS
Run the following script inside your project's root folder to compile SASS to CSS
npm run compile:sass
Now you would see a folder named assets and inside it there would be a folder named css and inside it your css file would be compiled.
I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead.
It uses Webpack to build and combine the .scss files into one. I did an npm install materialize-css so it's in my node_modules. In my project structure, I made an scss file that's used to import the module basically.
I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. It uses the following import statement:
#import "~bulma";
This works. I'm so confused about how this works. I think the ~ (tilde) tells Webpack something, but I don't know what. What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules.
I've tried #import "~materialize-css"; with no luck.
Can someone explain what the heck Webpack is doing? Haha, because I can't find any documentation on this.
Here are the node_module folder structures, maybe this has something to do with it:
Perhaps the root of Bulma is bulma.sass yet for Materialize-CSS, there's no file, it's in sass/materialize.scss.
If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets
You have to specific the file you want to import also like this
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import "~toastr/toastr";
I was tired of downloading js and css lib manually every time, then I jump into npm and webpack as I started a react project. But there are some awkwark:
Using npm install is fine, but I have to know where css/js/scss placed, they may be :
node_modules\materialize-css\sass\materialize.scss
node_modules\materialize-css\dist\js\materialize.min.js
node_modules\sweetalert\dist\sweetalert.min.js
node_modules\sweetalert\dist\sweetalert.css
node_modules\hint.css\hint.min.css
...
I still need found the correct path by myself, and add to index.html or import at index.js, like before , but it does reduce the time for searching lib's download link)
There are many js lib contain css file, but webpack is not so easy to add a lib with both css and js:
Such as webpack-import-bootstrap-js-and-css, have to add so much config code to make css import, why don't I just include the css at index.html? It just one line. However separate js,css import in different file make me feel uncomfortable too.
I hope there is a way like:
npm install --save sweetalert
add webpack config, something like(no need to know structure of a lib ):
...
new webpack.ProvidePlugin({
swal: "sweetalert",
use_css: true, // false for someone need custom theme
use_js: true
}),
...
But I don't found a good way now.
You can provide path to the .css file. This works for me:
import swal from 'sweetalert'
import 'sweetalert/dist/sweetalert.css'