Pack then import CSS from a local library (Angular)

Primary tabs

Angular, Angular2, CSS, Other

Hi all,

This might be a stupid question, but I'm going to ask it anyway. 

My goal is to write a scss file, pack it as part of a local library (Something like my_library.tgz), npm install that library into a different project and then import that scss file in one of the scss files in the new project.

Simply having the scss file exist in the library before I pack it didn't seem to work; the file wasn't under node modules after the npm install.  Am I doing something wrong, or are there extra steps I have to take?

Thanks in advance.

(Also if my desired workflow isn't clear, or you think there's a better solution, definitely let me know)

  • 0
  • 0
  • 71
  • 3
  • 2

Answers

This might be a stupid answer but here goes! 

It sounds like you are looking for build tools to help you manage your CSS and JavaScript needs (minification, bundling, pollyfillers, CSS generation from SCSS, prefixing) . Have you looked at Gulp or Grunt before? You can use NPM to get them. These tools have a SCSS/SASS module that you can import before writing your various build tasks. 

You can also find good templates for these tools that you can use as 'boilerplate' code that you then customize for your needs. 

Gulp Template

Grunt Template

 

Another part of your question seemed to refer to using NPM to create local packages that you can then import into various projects. This article describes three solutions:

  1. npm link 
  2. npm install /absolute/path/to/project
  3. npm pack with npm install yourproject.tgz

You can install packages globally using npm install -g <package>  but this is generally used for CLIs 

That article about pack and link was very helpful and informative.  Thanks for that.

It didn't address what I'm asking, though (unless it did, and I'm wrong).  I don't really need a css build tool, at least I don't think I do.  I literally just want to know how I can get a scss file from one project into the node_modules directory of another via npm.

When I used npm pack on project1 to create a tarball, then installed that tarball into project2, the css file from the project1 wasn't in tarball2's node_modules, and I'd like it to be (so I can import it somewhere in project2).

Try this based on npm link

File Structure
/projects/my-scss
/projects/my-existingproject

Create a new project
cd /projects
mkdir my-scss
cd my-scss

Initialize the project and answer the prompts
npm init

Dump a SCSS file in there

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Navigate to your existing project
cd ../my-existingproject
npm link ../my-scss

Verify the my-scss folder exists in the node_modules of your existing project.

Then suppose you want to get all the *.scss files in your my-scss project and put them in the /wwwroot/scss folder of my-existingproject. Gulpfile.js within my-existingproject would look something like

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

var deps = {
    "my-scss": {
        "**/*.scss": ""
    }
};

function scripts() {

    var streams = [];

    for (var prop in deps) {
        console.log("Prepping Scripts for: " + prop);
        for (var itemProp in deps[prop]) {
            streams.push(src("node_modules/" + prop + "/" + itemProp)
                .pipe(dest("wwwroot/scss/" + prop + "/" + deps[prop][itemProp])));
        }
    }

    return merge(streams);
}

exports.scripts = scripts;
exports.default = scripts;

Then providing you have installed gulp and all required gulp-modules run 'gulp' from the project directory command-line. This will run the default task.

Thanks a lot; I'll look into this.

Disclaimer: I know more about what John is doing than is covered in the post.

It looks like, for the prebuilt themes, Angular Material itself uses Bazel (see introduction at https://angular.io/guide/bazel). The relevant bits are here:

https://github.com/angular/components/blob/master/src/material/prebuilt-themes/BUILD.bazel
https://github.com/angular/components/blob/master/src/material/core/BUILD.bazel
https://github.com/angular/components/blob/master/src/material/BUILD.bazel

I think that's probably the place to start, in terms of Angular 8 best practices.