anarh / node-sass-import Goto Github PK
View Code? Open in Web Editor NEWAllows recursive import of SCSS components from local and/or node_modules directories using npm's module resolving algorithm.
License: MIT License
Allows recursive import of SCSS components from local and/or node_modules directories using npm's module resolving algorithm.
License: MIT License
Most front-end npm pacakges use the "main" field in their package.json to point to their main JS file. The css "entry point" us usually "style", as used by bootstrap or "style" as well as "sass", as used by bootstrap-sass.
package.json
{
"name": "baukasten",
"version": "0.1.0",
"description": "Baukasten is a super thin boilerplate with only the basic stuff.",
"scripts": {
"sass": "node-sass --include-path scss assets/scss/main.scss assets/css/main.css --importer node_modules/node-sass-import",
"prefix": "postcss --use autoprefixer -o assets/css/main.css assets/css/main.css",
"build": "npm run sass && npm run prefix",
"watch": "nodemon -e scss -x npm run build"
},
"keywords": [
"boilerplate",
"sass",
"frontend"
],
"author": "Dean Hidri",
"license": "WTFPL",
"devDependencies": {
"autoprefixer": "^6.3.6",
"bemify": "^0.1.2",
"node-sass": "^3.6.0",
"node-sass-import": "^1.0.0",
"nodemon": "^1.9.1",
"postcss-cli-simple": "^1.0.1",
"sass-module-importer": "^1.2.1",
"sass-rem": "^1.2.2"
}
}
Console Log:
G:\work\development\_github\baukasten\node_modules\node-sass-import\lib\node-sass-import.js:19
if (err) throw err;
^
Error: Cannot find module 'sass-rem' from 'G:/work/development/_github/baukasten/assets/scss'
at G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:46:17
at process (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:173:43)
at ondir (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:188:17)
at load (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:69:43)
at onex (G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:92:31)
at G:\work\development\_github\baukasten\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)
Currently I have the problem that the importer is not supporting '~' within the import path.
I used this so that my IDE (webstorm) recognizes the imports correctly.
Best thing would be if the importer either ignores (strips) it or uses it directly as a reference to node_modules.
working but not recognized as correct path from the IDE:
@import 'bootstrap/scss/bootstrap';
not working but correct path:
@import '~bootstrap/scss/bootstrap';
@import './components/*';
This works right now if it only matches one file. It should ideally return every .scss in there, concatenated (as { contents: '..' }
). Of course this approach means you can't intermix .scss and .sass, but hey, you probably shouldn't anyway.
I'm trying to import normalize.css:
// src/input.scss
@import 'normalize.css';
Also trying this:
// src/input.scss
@import 'normalize.css/normalize';
But it resolves to:
// public/output.css
@import url(/Users/rsc/project/node_modules/normalize.css/normalize.css);
However, this works:
// src/input.scss
@import '../../node_modules/normalize.css/normalize';
Some packages only declare a .js file in main. Some packages also have a bower.json file, which declares it's own main. Currently this importer will try and evaluate a js file if it's in the main. Example: https://github.com/kenwheeler/slick
Slick.js also lists multiple files in it's main bower.json. (css,scss,and less). I tried
@import "slick-carousel/slick/slick.scss";
and it gave me a multiple file error:
It's not clear which file to import for '@import
.
It'd be nice for the world to know about this! It's a feature that's been around node-sass-import for a while but it hasn't been documented.
Build hangs when I include this package.
Importing something like @import 'styles/my_partial_1.css';
fails with an error that reads Error: Cannot find module 'styles/my_partial_1.css' from <cwd>
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.