I have a .scss file in one of installed node_modules. I want to import that scss file into .tsx file for the styling of a component that I am trying to create.
#mixin make-embedded-control($className: embedded-control){.....}
The scss file has the following mixin that has all the css classes that I intend to use it in my .tsx file but normal import is not working.
Due to compliance issues I am not able to share source code.
I am new to scss so I would be glad if anyone can help out.
You cannot use mixin in typescript.
To use a scss file in Typescript you have to:
Install SASS and its typing file if you are using typescript.
npm i -D node-sass
npm i -D #types/node-sass
Import scss file in your .ts
import './style.scss';
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.
How do you add SCSS to your React Project?
If using create-react-app then:
1)First install sass dependency using npm:
npm install sass --save-dev
2)Import your sass file to your componentName.js file
import '../scss/FileName.scss';
The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:
npx create-react-app my-app
After that, React sets up a full development environment with css files you can edit to style your code.
If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:
npm i sass --save-dev
(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support
Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.
If you are using create-react-app, just add sass as a dev dependency.
yarn add -D sass or npm install --save-dev sass
Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css
first, install sass in your project. Then import it into your component.
install sass:
Using npm:
npm install sass
Using yarn
yarn add sass
import in your component:
import example from './example.scss'
Node-sass is deprecated, use sass.
install sass:
Using npm: npm install sass --save-dev
Using yarn: yarn add sass
import in your component: import example from './example.scss'
if you are in starting your new project and want control over webpack config, try to use react-app-rewired or craco, they offer you control over webpack config, by which you can add any loader into your config.
if CRA suffices your need then no need to complicate things above-mentioned packages.
Thanks
npm install sass
create theme/assets folder inside src.
add variable mixins file with underscore.
incude scss file in component scss file.
#import './Assets/mixins';
Here is an link to sample react project with scss
The steps to add Sass to Create React App are:
Install node-sass:
npm install node-sass
or
yarn add node-sass
Since node-sass has deprecated therefore you can use the following steps to install sass :-
npm install sass --save-dev
**or**
yarn add sass
Convert your .css files to .scss
Import your .scss files in your React components like App.js
I have a problem, I'm trying to build a component library and at the same time I would like to have a dev server in the same project for fast debugging and developing of this component library.
Currently my configuration is next, for library building I use typescript to transpile to es5 and I have all styles as scss and compile them into css with node-sass. For this config to work I import styles as css(not sass) since otherwise scss files won't be found in lib directory.
Here are my source files:
And this is lib folder after being compiled:
And this is my configuration for building lib folder
Now I'm trying to configure dev server with webpack and I decided to import components directly from src (not lib) to fast forward development. And it doesn't work with my current styles imports (as css) because webpack compiles my scss styles as a big bundle and merges it into js bundle but those statements where I import css are still there which case errors.
Module not found: Error: Can't resolve './Title.css'
I believe there is a solution to this problem but which way to take I'm not sure, please suggest!
My preference is to keep library building without webpack and use webpack for dev server
]I am trying to compile a css file from sass. I am using bulma (bulma.io) as the css framework. Here is the directory structure I have
I am trying to change the grid.sass to output.css
and I am running this command from the "bulma" dir
sass grid.sass output.css
but I get the following error
Error: File to import not found or unreadable: utilities/mixins.sass.
on line 1 of grid.sass
Use --trace for backtrace.
I don't know why this error is appearing. I am running this according the documentation. I am on CentOs machine, and have gem installed.
[root#foo bulma]# sass -v
Sass 3.4.23 (Selective Steve)
I'm not too familiar with the sass gem, however according to their docs, you would not use quotes and add semicolons. So I assume something like:
#import utilities/mixins;
Import - Sass Docs
You might also need to rename your grid file to have an underscore, as mentioned in their docs as well.
I was getting similar error in when I was using bulma-extensions. To fix it, I had to update the import statement from
#import 'bulma/sass/utilities/_all.sass'
to this.
#import '../../bulma/sass/utilities/_all.sass'
Note: I installed sass-loader and node-sass in vue-cli generated project.