Geek Answers Handbook

Bassle sass files to a single sass file

TL DR: My question is how to merge some of my sass files into a single sass file?

I have been developing the Angular component library and I am packing it with ng-packagr. Let me call him @my-lib/ngx-components.

Consumers of my library will import my components, for example @my-lib/ngx-components/navbar.

I decided to add component support to the components.

For example, I have a navbar component with default colors (background, text, hover, etc.). I want my library users to be able to redefine these colors with their own theme. This is why I wrote a mixinwhich accepts the input $themeand redefines some css rules as follows (this is the basic version of what I have)

_navbar-theme.sass

@mixin navbar-theme($theme) 
    $primary-color: map-get($theme, primary-color)
    $secondary-color: map-get($theme, secondary-color)
    $color: map-get($theme, color)

    .navbar
         background-color: $primary-color
         color: $color
         &:hover
               background-color: $secondary-color

*-theme.sass .

_theming.sass,

_theming.sass

@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'

_theming.sass , sass @import '~@my-lib/ngx-components/theming' mixin. navbar, button .., mixin .

angular - .

node-sass, . sass css, mixins .

, angular -. scss-bundle

: " , ". scss, sass. sass.

: ", sass scss. scss, ". sass-convert. , . , sass-convert npm , . , Gulp .

Gulp , , .

"Hal fixing light bulb"

TL; DR: , sass sass?

, , webpack, .

+6
2

:

_theming.sass lib, sass @import '~ @my-lib/ngx-components/theming' . , .., .

, . , angular cli , , .

, css ( css) sass bundle ( ).

_theming.sass lib, sass @import '~ @my-lib/ngx-components/theming' . , .., .

angular - .

-, , @angular/material sass ( scss), css thene, scss-bundle ( ) . theme.

: " , ". scss , sass. sass.

answer:

Sass - CSS . CSS. CSS .

sass scss (), ( , scss sass ).

:

1. css sass (scss better)

, css scss. Beacuse angular cli scss .

sass, scss, . .

scss-bundle + webpack

css, webpack scss. Scss cli, cli.

2. scss

, bootstrap @4 . ​​ ():

scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss

index.scss :

@import 'variables'
@import 'mixins'
@import 'functions'
...

scss css. bootstrap do, mixin . , scss scss ( , scss).

UPDATE

. webpack, .

:

scss-bundle-plugin.js

config webpack:

plugins: [
   new webpack.NoEmitOnErrorsPlugin(),
   new SCSSBundlePlugin({
        file: path.join(__dirname, 'src/index.scss')
   })
],

, hello-world-loader, :

# install dependency
npm install
# try play ground
npm run webpack

_theme.scss ./dist.

webpack, runter (gulp grunt) . Webpack .

+1

scss/sass bundle-scss

. , ./src/**/*.theme.scss , ,

. bundle-scss , .

0

More articles: