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';
Related
I'm on VScode using SASS and I have a separate file for my navbar but when I try importing the file to my main SASS file which auto compiles (using live server and live sass compiler), it won't update any changes to my navbar on my practice website.
I'm using #import 'navbar'; in my root sass file, am I missing any extensions or downloads?
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 have a few scss entrypoints (main.scss) which import other scss files with #import "components/popup".
Directory structure is as followed:
scss
main.scss
components
_popup.scss
_carousel.scss
otherScssDir
main.scss
components
_datepicker.scss
_dropdown.scss
When watching for changes on all my scss files with grunt-contrib-watch, both the entrypoints (main.scss) will be compiled to css. It would be ideal to only compile entrypoints where the imported scss files have been changed.
I'm using grunt-newer to check if files have been changed.
Is it possible to do this? A nudge in the right direction would be greatly appreciated.
I have a meteor 1.3 project. I did:
npm i --save bourbon
and added
#import "bourbon";
to my styles.scss file.
But I get this error:
While processing files with fourseven:scss (for target web.browser):
/client/styles.scss: Scss compiler error: File to import: {}/client/bourbon not found in file: /Users/olejo/Documents/webapps/myapp/{}/client/styles.scss
How do I add a CSS library (in this case; bourbon) into a Meteor CSS file?
(I have added SCSS with meteor add fourseven:scss)
I have integrated SASS with my project. Now i want to use variables which is define in .json file.
I have config.json and my application SASS file are in same folder
but when i try to import json in SASS it gives me error that File to import not found or unreadable
I also run the command
sass style.scss -r sass-json-vars