I have 50+ .scss files in 5 folders and use webpack plugin to import all files from folder.
// index.scss
#import "default/*.scss";
#import "vendors";
#import "components/*.scss";
#import "modals/*.scss";
#import "pages/*.scss";
This plugin work well with #import, but can`t understand #use. I think to extend plugin, but think if there is any other solution.
Related
In a project I'm using Bootstrap 5, importing modules from node_modules with a big list of #import (ex. #import "../node_modules/boostrap/scss/functions" etc...).
I'm worried about the deprecation of #import coming soon.
Simply replacing the #import with #use will break the sass build (my compiler doesn't seem to be the culprit as simple cases with #use do work).
It seems to be a problem with the new scoping of #use and npm bootstrap 5.
What should I do?
Can I import all .scss files in a sub-directories with node-sass?
I'm guessing it would be something like this?
#import './directory/**/*.scss'
No, there is a request on the Ruby Sass GitHub repository for this functionality, but libsass/node-sass won't implement functionality not in the main language. You may be able to find plugins that do this.
Say I have the following structure
/node_modules
/src
/components
/component1
/style
/style.less
Now I want to import some LESS file from node_modules/some-module/style.less; I'd have to do something like #import '../../../../node_modules/some-module/style.less
Is there no short hand notation so that the path is relative to project folder? Something like #import ~/node_modules/some-module/style.less?
You can achieve this by installing less-loader and add it into webpack.
How to do it:
https://www.npmjs.com/package/less-loader#webpack-resolver
Example:
#import "~font-awesome/css/font-awesome.min.css";
The documentation for Bootstrap's node package says to simply add #import "bootstrap"; to my scss file to include Bootstrap's scss.
When writing my own node package, how do I get this functionality?
For instance, I have a package called foobar. How can I set it up so that it will know where to grab my package's scss simply by putting #import "foo"; in my main scss file?
If the name of your main SCSS file is foo.scss, it works. Check here for more information: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
I see a demo using some class(RACCommand) without importing header file. It just
pod install
And then
#import <Foundation/Foundation.h>
#property(nonatomic,strong)RACCommand *fetchHotReplyCommand;
It works!
However, when I tried to copy his code, I need to import RACCommand.h.
#import <Foundation/Foundation.h>
#import "RACCommand.h"
#property(nonatomic,strong)RACCommand *fetchHotReplyCommand;
How does the demo work without importing the header?