Sass Importing Without Compiling

Sass importing without compiling

Taking a look at Foundation demonstrates a good approach to this:

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

Here they have one @import "global"; at the top of the file.

That is followed by a bunch of mixins

At the bottom they have:

@include exports("breadcrumbs") {
  @if $include-html-nav-classes {
    .breadcrumbs {
      @include crumb-container;
      @include radius($crumb-radius);

      &>* {
        @include crumbs;
      }
    }
  }
}

The $include-html-nav-classes is set to true by default in the _global.scss file. It can be overridden in any other file by changing it to false. This allows you to both use the mixins and generate html.

If you don't need to generate any css just include mixins only and it will simplify your situation. I believe that they do this to allow for fast customization and optimization of the outputted css.

Gulp SASS - Use @import without compiling scss - css

I've stumbled upon the very same problem. This one is going to help You. Although has some flaws (forget about filenames prefixed with underscore - that's what i found till now).

the npm package that is build especially for this purpose

Disclaimer: I am not gonna explain how does the npm works, i assume author knows what is npm package if he wants to use gulp plugin. Please do not remove my answer just because i`m not unnecesarily explicitly describing what's obvious for
person that aked a question.
To prevent deletion of this answer as lacking context i'm quoting package description.

import resolve
resolve @import statements in stylesheets

What this does
What if you have some less or stylus files that you want to smash together into a master file, without compiling to css? Just use import-resolve and all your dreams will come true. All @import statements will be resolved and you'll be left with one file containing all your precious mixins, variables and declarations.

Using import-resolve

npm install import-resolve
// some-node-thing.js 
var importResolve = require('import-resolve');

// spits out a master dist file with all your wonderful stylesheet 
// things concatenated 
importResolve({
    "ext": "less",
    "pathToMain": "path/to/main.less",
    "output": "path/to/output.less"
});

// if you don't specify an output file, output accepts a callback parameter 
// and passes the concatenated file text 
var output = importResolve({
    "ext": "styl",
    "pathToMain": "path/to/main.styl"
}, function (output) {
    fs.writeFile('foo.styl', output, function (){
        console.log('did it myself.');
    });
});

@import SCSS files not recognized by compiler?

SCSS import statements require a semicolon

@import "variables.scss";

How to make Sass not to compile my partial files?

https://sass-lang.com/guide

A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the @import
directive. (@import is soon to be deprecated, with a move to @use and @forward instead. https://sass-lang.com/documentation/at-rules/import)

Thanks Arkellys.

Import multiple SCSS files into one SCSS file and compile to one CSS file

This is the config I use :

• Installs

npm i node-sass-glob-importer
npm i --global gulp-cli
    
npm i sass gulp-sass --save-dev
npm i gulp-sass-glob --save-dev
npm i gulp-sourcemaps
npm i gulp-concat
npm i gulp-uglify

• gulpfile.js :

const { src, dest } = require('gulp');

const
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require('gulp-sass-glob'),
sass = require('gulp-sass')(require('sass')),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');

function scss() {
return src(['./dev/assets/_scss/main.scss'])
.pipe(sourcemaps.init({largeFile: true}))
.pipe(sassGlob())
.pipe(sass())
.pipe(concat('theme.min.css'))
.pipe(sourcemaps.write('.', {debug: true}))
.pipe(dest('dev/assets/css'));
};
exports.scss = scss;

function js() {
return src('./dev/assets/_scripts/**/*.js') 
.pipe(uglify()) 
.pipe(sourcemaps.init())  
.pipe(concat('theme.min.js')) 
.pipe(sourcemaps.write('.')) 
.pipe(dest('dev/assets/js'));
};
exports.js = js;

main.scss contains imports like @import 'folder/*'; or @import 'file.scss';

Then you can call gulp scss and gulp js

---

Related Topics