angular-cli sccs without bundling - sass

I'm using angular-cli (1.5, angular 5.0) and I want to be able to define multiple themes. It seems one way to do this is to:
Define the bulk of the scss as per normal ("styleExt": "scss", and "styles": [...] .angular-cli.json)
Use node-sass directly (outside of angular-cli config) for the theme.scss files
Link to the appropriate theme.css (Either replace the default theme.css outright, or change the link href dynamically
However, I'm not sure how to make that work in conjunction with ng serve, which watches the files. So, I was wondering if there's some way to do this through angular-cli directly. That is, can I specify some scss files to go into the bundle, but others to generate individual css not included in the bundle? For example, Just generate a assets/themes/foo/theme.css from an assets/themes/foo/theme.scss ?
A use case is that we may need multiple themes, but only distribute one to any given customer (defined to match their internal software).

After some additional digging, I found the Global Styles story. If you define a style as an object with an output, it will bundle it separately, so you could swap out a default theme with another (similarily compiled) on deploy. Or, if defined as lazy, it will not include it in the index file (index.html), and you can then define it explicitly, with an id (or unique class), and swap out the href (similar to what the angular material them switcher is doing.)

Related

Best way to store and use SCSS global variables for a AngularDart 5

I’m using AngularDart 5 in order to create a web app. I want to store some SCSS variables in my styles.scss file (web folder). What is the best way to use these variables in the SCSS stylesheet of a component (lib folder)?
Thank you!
There are a couple of concepts I need to clear up first:
Scss variables are only available at compile time. Once the file is compiled to CSS they are not available at runtime.
Dart has a convention where only files in the lib/ directory can be imported to other places in the app. I believe that dart-sass enforces this convention, and you won't be able to import the file from web.
So your options are:
Move the styles.scss file to the lib directory so that it can be
imported. Convention is to have it start with an underscore which
signals it is just for imports.
Use CSS Variables which can be used
at runtime.

How to install node modules but commit only relevant styles

So, I am setting up a new site and my project's folder structure looks like this now.
foo.com/
index.php
assets/
css/
img/
js/
vendor/
I have added vendor/ for js/css libraries that I must install to keep them separate, since I want anyone who installs my project to install those in vendor from package.json - most libraries contain too many files 99% which I don't want to push to production.
Now once the project is finished, I would like to push the code to production with only the necessary js/css files.
This is where the problem comes. For example, if I install bulma css using:
yarn add bulma --modules-folder ./assets/vendor
It will dump all bulma-related files which are almost 70 into /vendor/bulma/ but I will only be needing one or two css files afterwards, since I will compiles the sass file to css as:
sass vendors/bulmna/style.scss assets/css/style.css
So my questions is: I am assuming this is how every developer does it and there are no documentations I can find that suggest how to do it. Is it safe to ignore the /vendor directory? What if I install vue, font-awesome, bootstrap .. how can I only fetch the files I need but not everything in /vendors folder?
Your question is actually quite broad - however, I'll try to list as much as possible.
Lets say you're building a project from scratch and needed to include vuejs, jquery, fontawesome but only need to include a couple of files.
The issue you're hitting here is module dependency with respect to npm modules. (and there are many different tools that you can use to manage versions on your library dependencies as well as ensuring they are included into your project, i.e. package managers).
Ok - now from here, you may say to yourself
but I only need say, one icon from fontawesome in your final build (dist) and I don't want to commit all my modules into source control
Again, this is where you omit node_modules and other dependent libraries from source control (i.e. include node_modules your .gitignore)
To reiterate
You can install the required library,
add node_modules to .gitignore ,
bundle those libraries into a vendor single file to be consumed by your users (can be via browserify/webpack/rollup/gulp/grunt/yarn etc).
generate bundle within npm script
Now you may ask further -
Why would I use any of those tools? - they're distracting me from simply copy/pasting vendor libaries into my source control.
Build tools were created to
streamline the developer pipeline so that you DONT have to copy/paste vendor libaries into a vendor folder.
ensures that all files are bundled to the client automatically
allows you to keep track/restrict library version updates/ when required via package.json
allows you to add other build steps (such as minification, md5hash versioning, compression, code splitting, asset management to name a few).
Now lets break down the original question here:
How to ensure other developers get everything they need when cloning the repository
how do I ensure I can provide only the necessary files to the end user (if I only use specific parts of vendor libaries?)
1. How to ensure developers get what they need
Again, to reiterate above, adding devDependancies and .gitignoring allows you to only add the necessary files to your project.
2. How can I ensure clients get what they need without bloating request files?
This is where build tools such as webpack, browserify, gulp, grunt, rollup, attempt to achieve. This is because with some libraries that exceed in file size of 200kb minified, you may need to separate these files into different client requests (and as such, not demand the user to request one large file, which was symtomatic of browserify projects).
The second technique you will need to be aware of, is with specific libraries, you can use import mdn link where you can require one function/class from a dependant library (which further reduces file size).
Another technique is using less import statements (which can extract less functions/styles similar to above, but this isn't currently supported in SCSS). for SCSS, you're basically left with copy/pasting the necessary styles into your base scss and that'll save you space as well.
EDIT
How to create a bundle from npm install libaries
From the comments you've mentioned above (about not wanting to include a tool into your workflow, there's no point outlining any one particular strategy - you can find answers/tutorials online about how to setup gulp/browserify/webpack for your particular needs).
However, As you are currently using yarn - I'll go into details about that.
Firstly, yarn is a package manager (like npm). All it does with the --modules-folder is install the package into the specified folder, that's all. So we don't really care about that (since it's doing the same thing as npm). (i.e. your vendor folder is the same as node_modules in many respects).
We could use
webpack
gulp
grunt
rollup
browserify
brunch
(All build tools that essentially allow you to bundle all those packages into a single entry point to be packaged to the client).
I won't go into how, because that is a process you can find online, and from the above comments, I can tell you don't particularly care either.
What you are looking for is a zero-config javascript build tool. (Extremely out of the scope of your original question, and i'll only answer that in a separate Q&A).
I'd try Googling on "tree shaking CSS" to see if that gives you something.
Maybe something like: https://github.com/jacobp100/es-css-modules
Rollup plugin may be useful. It works for js, with postcss, the link says it works with css also.
https://code.lengstorf.com/learn-rollup-css
Have a look at Pancake. It has been built specifically for the purpose of moving only those files out of the node_modules folder that you need. I wrote an article about it here: https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce
(probably not an answer but a good tip)
PS: I am the author of both, the article and the tool so with clear bias :)

Can I expose a .less/.scss reference file globally in Webpack?

We have a project using Webpack with css modules. To apply scoped namespaces, each component has its own .less file. Inside that .less file, we import our common.less file for references so we can use it like so:
#import (reference) "../global.less";
.navbar {
.navbar;
}
This seems pretty convoluted but results in an encapsulated class pairing with its component and allows the others to develop the global.less file internally without having to work with React.
My issue with this, beyond the redundant class wrapping, is each component that imports this rather large global.less file appears to be adding nearly a second to our webpack build.
I'm curious if there is a mechanism that will allow me to expose the contents of global.less for referencing within these files? I've found Webpack can shim js modules. I'm essentially looking for a .less or .scss equivalent.
You can add the commonChunkPlugin, then add your global.less path to it, in that way it will be compiled only once in another js file.
here

webpack sass-loader load only neccessary .scss files.

Is it possible to only load the appropriate .scss files? For some reason even though a react component isn't being used on a page the .scss file is still being included in my css.
I am currently using ExtractTextPlugin since I also want sourcemaps to work.
You could look into react-proxy-loader It will allow you to load components and their dependancies on demand.
I'm assuming what is happening for you right now is all your code is being delivered as one or two bundles, so it makes since that some components that may not be in use (along with their required css) would still be included with the bundle.

Selectively disable asset.digest in Rails 3, so external site can include stylesheet

The aim:
I would like a Tumblr blog to pull CSS from a Rails app's asset directory.
This means I can use SASS, Compass and other sitewide CSS to generate the styling.
This also means if anything is updated in low-level CSS, tumblr.css will be regenerated along with the regular cap deploy, and Tumblr's appearance will change automatically.
The problem:
The Rails 3 asset pipeline adds a hash to the filename, e.g.:
tumblr-c6ec969ce054623163b9404f6c8330e9.css
Therefore the Tumblr template can't include it unless I update the URL manually every time it changes.
Is there a way to either selectively disable asset.digest for one file, or to explicitly generate a single CSS file from SASS, without going through the whole asset pipeline? Or maybe to generate an automatic alias or something?
You will not have to disable the digests at all.
When Rails precompiles the assets, it adds digests to all the files. However it also creates identical files without digests. So both the following files will load the same css:
tumblr-c6ec969ce054623163b9404f6c8330e9.css
tumblr.css
If you check the public/assets directory after precompilation you should see both files.
Hope this makes helps.
In Rails 4 it seems that the asset precompile no longer does both the digest and non-digest filenames, only the filenames with the digest get compiled. The best option now to precompile assets without a digest hash is to use the Non Stupid Digest Assets gem:
https://github.com/alexspeller/non-stupid-digest-assets
Hopefully they add this to the Rails project as a standard feature in Rails 5.

Resources