Relative path of node_modules for LESS #import - less

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";

Related

SASS. Use glob pattern with #use

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.

Less import path -- where does it find libraries?

I'm looking at this code from Atom:
#import "ui-variables";
Which is being resolved to this ui-variables.less file.
My question is: by which rule did it do so? Where's the config that tells it to look in this static/variables directory for this file?

Include 'normalize-scss' in Vue CLI 3

Just added the package normalize-scss to my new Vue project, but none of the styles are being applied... I've tried both:
#import 'normalize-scss' in my styles.scss
import 'normalize-scss' in my main.js page
Am I doing something wrong? The package is clearly there because the app runs, but it doesn't actually apply any css rules.

I figured it out. You need to put the normalize() after you import it, in your main.scss file. So:
#import 'normalize-scss';
#include normalize();

after installing it with npm import it at the top of main.js file:
import "normalize.css"

If you have a main/global scss file you already use:
Add normalize.css (any of these) to your project: yarn add normalize.css (or npm)
in your main.scss for example: #import '~normalize.css';
Note the ~ for ambiguity as cli docs say: https://cli.vuejs.org/guide/css.html#referencing-assets

Not sure if this is the correct way to do this but, if you are using vue-templates maybe you can try to import the style doing this:
<style lang="scss">
#import 'src/assets/css/mycss_lib.css';
</style>
Also remember, do not use scoped in the style-tags. You also need, scss loader and node-sass to make this work.

npm install --save normalize-scss
In main scss file #import "normalize-scss/sass/normalize/import-now";

node sass can I #import './directory/**/*.scss'?

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.

How to specify scss #import name in node package?

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