I'm using Angular (Jhipster) on my application and I want to import several .scss files on my glocal.scss file. So I created an "util" folder (same level as global.scss file) and added these .scss partials inside it. On top of my global.scss file, I treid to do:
#import "util";
#import "util/*";
#import "util/;
And other alternatives, but I'm receiving this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Can't find stylesheet to import.
When I import one file at a time, it works.
How can I import a folder with .scss files inside my global .scss file?
I doesn't look like you can import a directory/folder based on this.
What you can do is in your utils folder create an index sass file that imports all the partials then importing utils should work based on this.
Related
I created a SPA with CRA. react version is 17.0.2 and the node-sass version is 6.0.1.
The current folder structure of the project looks something like this:
Inside the Styles folder, I have all the scss util files such as color variables, general styles, classes, and typography. The folder has a main.scss file where I import all the other sub-style files. "styles/main.scss".
If I directly import the file into any folder inside my project I can use those variables and styles defined in it.
Is there a way for me to, instead of importing it every time, just import the file in the main "index.scss" (located in src/index.scss, which is imported in src/index.js) and use the style in inner component styles?
To summarize what I need to be done;
To import the styles written inside of src/styles into index.scss insrc
To use the variables and styles in those files from inner component style files without importing index.scss or any other helper file
is it possible with the react's CSS compiling abilities with maybe some modifications to the webpack configurations?
I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',
function (){
return gulp.src('css/modules/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
}
);
When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?
I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.
#import "./modules/_reset.scss";
#import "./modules/_base.scss";
#import "./modules/_header.scss";
#import "./modules/_footer.scss";
#import "./modules/_blocks.scss";
#import "./modules/_interviews.scss";
#import "./modules/_search.scss";
in your case, there is two things to tell >>>
first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files
second: scss files starting with ( _ ), get ignored when compiling in gulp-sass,
it is like telling the gulp-sass compiler that these files are for import only.
Try with this:
return gulp.src('css/main.scss')
in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.
You want just main.css at the end to include in your html file.
I would like to know if it's possible to write just a name of a folder and every file inside would be automatically imported?
For example, I have a main.scss which contains only imports
#import "components/forms";
#import "components/header";
#import 'components/intro';
and I would like to just write
#import "components/**/*";
So every file inside components will be imported as above.
I can use sass-globbing. It lets me import directories or whole directory trees with a single #import statement:
// import a directory's contents
#import 'dir/*';
// recursively import a directory's contents and any sub-directories:
#import 'dir/**/*';
I’ll install it from the command line
gem install sass-globbing
more here on Github plugin homepage.
I'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will read each line and one by one compile to CSS and append them to my dist file.
My problem is that I want to access the variables and mixins in foundation from the app.scss, but since they are compile one after the other and appended, it doesn't seem possible to access those mixins and variables. Any one has a solution?
You need to load your dependent .scss files within app.scss.
To do this with webpack. I've configured my app.scss like so:
#import '~foundation-sites/scss/foundation';
#import 'settings';
#include foundation-everything($flex: true);
// the rest of my imports now have access to Foundation mixins
#import 'mycomponent.scss'
The ~ tells sass-loader to tell webpack to look in the modules directory for those files.
I used https://github.com/Swiip/generator-gulp-angular to boilerplate my angularjs application.
I discover bootswatch theme flatly and want to use it and downloaded from [http://bootswatch.com/flatly/][2] two files, _variables.scss and _bootswatch.scss.
I added these two files to my vendor.scss
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/variables";
#import "flatly/bootswatch";
and with gulp serve, I build my application and on console it shows me.
project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg
[1]: https://github.com/Swiip/generator-gulp-angular
[2]: http://bootswatch.com/flatly/
Why unbound variable $navbar-default-bg but the $navbar-default-bg exists in _variables.scss file.
$navbar-default-bg: $brand-primary;
My project structure:
Import the _variables.scss file at the beginning of your custom index.scss:
#import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';
Another way around could be following these instructions >> https://github.com/Swiip/generator-gulp-angular/issues/379. I haven't tried this, though.
Try importing in this order variables, bootstrap, bootswatch as per
https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss
#import "flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/bootswatch";
The boilerplate attempts to compile all .scss files in the src folder (When it should ignore scss files starting with _).
Moving flaty outside of /src makes it behave eg
#import "../../flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "../../flatly/bootswatch";