4

Following the theming page of the Bootstrap documentation, I can successfully compile a custom.scss file into CSS in my NPM project which follows the recommended file structure:

my-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

However, I am not satisfied with this CSS output; I would like to leverage additional tools that Bootstrap uses, such as autoprefixer and minifier. For example, my custom.scss would compile then output both custom.css and custom.min.css files—just as would be done by running npm run css-minify-main within the Bootstrap source folder. Bootstrap's build tools documentation page even describes how to do that, but it says nothing about integrating custom SCSS into this process.

As a potential workaround, installing all of the same devDependencies and copying the scripts from bootstrap/package.json into my project would not only be redundant. It would require active maintenance (e.g. if the source were updated by npm, or even tracking the Git repo, etc) in order to ensure that all versions are up-to-date, to check whether deps have been added/removed, and so on. So, is there a way to run those exact scripts from within my-project/ instead of the my-project/node_modules/bootstrap/ source folder?

John E
  • 193
  • 1
  • 13
Arkh
  • 8,416
  • 40
  • 45
  • What is the question? "*I've got a custom css made. Using sass it compiles and give a customized css file*"... sounds like it's already working? Are you asking how to [customize Bootstrap with SASS](https://stackoverflow.com/a/49070142/171456) or how to include vendor prefixes and mimimize from npm build? – Carol Skelly May 02 '18 at 10:37
  • 1
    With the customize bootstrap with SASS method you end with 7k line files which include most part of bootstrap. I'm not really fond of just adding this generated file on top of the generic bootstrap file. Reading the package.json file it does not feel like there is an easy way to specify a custom file in the input without tinkering with the bootstrap sources. Which is discouraged in the link you gave. – Arkh May 02 '18 at 12:12
  • @Zim: He is asking **both**. How to both [customize Bootstrap with SASS](https://stackoverflow.com/a/49070142/171456) the clean, canonical (and [recommended](https://getbootstrap.com/docs/4.3/getting-started/theming/#file-structure)) way _and_ have the generated CSS replete with autoprefixing, linting, docs, all tools and output as `npm build dist` would provide as specified in bootstrap/package.json. – John E Feb 27 '19 at 14:17
  • @Arkh never clarified the question. *"The problem is it does not include the vendor prefixes or minimized output.."* isn't the same as *"have the generated CSS replete with autoprefixing, linting, docs, all tools and output"*. John E can you edit the question to clarify exactly what you expect in the output css that's different that changing SASS vars and rebuilding the Bootstrap CSS? vendor prefixing and minify are controlled by the SASS compiler, not how you customize Bootstrap SCSS. – Carol Skelly Feb 27 '19 at 14:24
  • @Zim: Thanks for your comment. I understand that SASS compilation and customizing Bootstrap components are separate, which is actually what I/we want to resolve if possible! I will gladly edit the question to include clear expected outcome. – John E Feb 27 '19 at 15:44

2 Answers2

3

You can run a script in Bootstrap's package.json from your projects package.json. Build your custom CSS, and then run another script that switches to the /node_modules/bootstrap folder and runs the desired Bootstrap npm scripts.

For example, in the my-project/ package.json

"scripts": {
    "build-css": "node-sass ./scss/custom.scss -o public/css/ && npm run bootstrap-scripts",
    "bootstrap-scripts": "cd ../node_modules/bootstrap && npm-run-all css-prefix css-minify" 
    ...
},

The only other way would be to duplicate the Bootstrap scripts and dependencies in your project, which, as you mentioned, isn't desirable.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • In this example `"bootstrap-scripts": "cd ../node_modules/bootstrap && npm-run-all css-prefix css-minify"` would not prefix/minify the custom SASS in `my-project/scss/`. It would still only do so for the Bootstrap project source. – John E Mar 04 '19 at 19:53
2

If you want a quick no-config setup for using and customising bootstrap toolchain, you can use laravel-mix. It comes with auto prefixer, CSS/JS concatenation and minification, live-reloading and other options. Basically, it is for laravel framework, but can be easily used for stand-alone projects without laravel.

Rhythm Ruparelia
  • 667
  • 7
  • 13
  • Thank you for your suggestion. However, this doesn't solve the desire to _"leverage [the] tools that Bootstrap uses"_. Also, the last paragraph of the question cites wanting to avoid redundancy and extra maintenance which is what installing additional tools would introduce. – John E Mar 11 '19 at 16:44