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').
Related
So I downloaded a package from NPM its called react-csv-importer. My React app is using scss to customize layouts. I am coding from a react-bootstrap template I purchased from react-bootstrap.
Their layout is confusing me and I cant seem to understand how to customize an NPM package I install...
Here is a photo of the index.css file that contains everything I need to edit
Here is a screenshot of the layout of the SCSS
Here is another screenshot inside the theme folder, It contains most of the scss files
Now shouldnt I just be able to create a new file called something like csv-importer.scss and then copy the code from index.css thats located in the NPM package and update it in the SCSS? How do people go about editing an NPM install this way?
You should never customize or touch a package you've installed through npm. If you change the package in node_modules then 1. it will get overwritten as soon as you do npm install again, 2. it won't be saved to your github since you need to exclude node_modules with .gitignore. node_module packages should be left alone, untouched.
Instead you should import the things you need to use from packages and use it in your own code. So if you have a package called "example" that you've installed through npm then you need to do:
import Something from 'example'
// use Something here
In order to use it. This is how you use stuff from node_modules.
In your case you should likely import the styles from the package you've installed, either through scss #import or through node import, after which you can use it in your own code. However you should not modify the original code they have.
If the package they have is .css then you can't change that to .scss, you'll just have to use it as .css. Which is not such a big deal since scss will get compiled to css anyways.
What you can do is to import all of their styles through #import and then to overwrite the things you want in your own code or scss.
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'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
]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.
I am fairly new to ember and very new to the build tools. I am currently using the usual foundation install with the foundation cli and compass to compile my css, this is a bit of a pain and is very bad for working on a team. I thought it would be better to install the files with bower and use ember-cli-compass-compiler as stated in the docs but its not working as expected. I would like to have the app.scss file in the app/styles directory and import all the required foundation components within that file. I would also like to keep the _settings.scss component within the app/styles directory so it can be easily shared.
E.g
#import "settings";
#import "vendor/foundation/scss/foundation";
However this gives me the error File to import not found or unreadable: vendor/foundation/scss/foundation.
I can assure you that the foundation.scss file in the vendor directory does exist. I have also tried importing the file using app.import() in the Brocfile.js but with no avail.
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
#import 'bower_components/foundation/scss/normalize';
#import 'bower_components/foundation/scss/foundation';
Just recently released ember-cli addon for foundation
Here: https://github.com/artificialio/ember-cli-foundation-sass
and here: https://www.npmjs.org/package/ember-cli-foundation-sass.
Hope it helps!
The accepted answer did not work for me. If that is the case for any other developers then this answer might help.
First, install ember-cli-sass addon
npm install --save-dev ember-cli-sass
Next, install foundation
bower install --save-dev foundation
At this point you might want to rename your app.css to either app.scss or app.sass.
Next, tell ember cli to include the foundation Sass files just installed in the asset pipeline building process. Add the following code in ember-cli-build.js
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
}
});
In your app.scss file, import foundation using the following line of code
#import 'foundation';
If you do not want to import all of foundation but bits of it, then you can do so by importing the appropriate component e.g. #import 'foundation/fuctions'
This is worked for me well! Just install following package,
npm install --save-dev ember-cli-foundation