Creating CSS folder NPM Angular Library

Question

I am creating an NPM Angular library and would like to have a css folder and custom fonts available in the final build, so I can only import scss files into applications that will install this library directly into their scss files.

Library structure:

src/
--lib/
----styles/
------variables.scss
------custom.scss
----components/
--public_api.ts
--test.ts
package.json

import should be like that in scss file?

@import '~@mylib/styles/variables.scss'

I'm trying to copy the css folder to build by myself in script that generates the build.

Something like:

ng build lib && cp /styles dist/lib/styles && npm pack

Haven't success yet.

I don't even know if that's a good practice, but it is that i think it'll work

I'm trying to copy the css folder to build by myself in script that generates the build. Something like: " ng build lib && cp /styles dist/lib/styles && npm pack ". Haven't success yet. — Nathan
– Nathan, Commented Aug 9, 2019 at 17:07

Nathan · Accepted Answer · 2019-08-09 18:01:20Z

1

Got it

I keep not knowing if it's the best practice, but it works.

Place this on scripts in package.json, then use npm run build-mylib to build and pack your library.

    "build-mylib": "ng build mylib && npm run cp-styles && npm run cp-assets && cd dist/mylib/ && npm pack",
    "cp-styles": "cpx \"./projects/mylib/src/lib/styles/**/*\" \"./dist/mylib/styles\"",
    "cp-assets": "cpx \"./projects/mylib/src/lib/assets/**/*\" \"./dist/mylib/assets\""

answered Aug 9, 2019 at 18:01

Nathan

316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Omkar Dixit · Accepted Answer · 2019-08-21 19:44:44Z

0

you can also write a gulp task to do it for you, it would just reduce the number of scripts you run during compiling, but all those tasks would be done in the gulp file. This will go in gulpfile.js

gulp.task('copyStyles ', function() {
    return gulp.src('./projects/mylib/src/lib/styles/**/*\')
        .pipe(gulp.dest('./dist/mylib/styles\'));
});

and in your package.json > scripts

"pack-lib": "ng build lib && gulp copyStyles && npm pack"

answered Aug 21, 2019 at 19:44

Omkar Dixit

7741 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

Creating CSS folder NPM Angular Library

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related