Laravel mix removes all comments (except the ones formatted with /*!) when compiling sass into css on production.
Our CMS 'Umbraco' needs a specific comment format preceding css-selectors though.
e.g. /**umb_name: title*/
Does anyone know how to preserve comments when running npm run production with laravel mix?
kind regards, Marco
Related
I'm developing a progressive web app using Vue.js.
While I'm developing I use the command npm run dev to start the local server which serves the files on http://localhost:8080/. When I want to build for production I use npm run build prod which generates the output files in project\dist. I then take those files and copy them onto an ISS which is configured to work with single-page applications. All good so far.
I noticed some differences in the way the app looks (css) between the dev and prod build. First I thought this might be because of a client side cache, but after several tries to clean the cache and no-cache loading I'm sure that caching is not the issue here. The output really is different.
To be honest, I'm not sure if there is anything else different besides a few minor css parts. I was thinking what might be the issue, one of the things I noticed that could be the cause is that I use single file components in vue with scoped css (*.scoped.vue.css file names). I guess there could be an issue combining the different files into a single one?
It might be noted that I'm quite a newby when it comes to npm, webpack and all the other involved technologies. If you want to take a look at the configuration, you can find my current working branch build configurations here.
Any idea what the issue might be?
I encountered the same problem when using single file components. The issue indeed seems to be that when you run npm run build it will generate one single css file without the guarantee that the styling will be applied in the same order, causing some property values to be ignored. I 'fixed' it by adding !important to the properties that weren't matching up in the final build. There's probably a better way to handle this, but I must admit I too am quite a newby.
The order of how styles are applied while npm run build matters, and is to my knowledge out of (y)our control. To get rid of conflicts, when using Vue.js, you may want to scope your styles.
In every *.vue file within your project, replace
<style>
...
</style>
With
<style scoped>
...
</style>
I search over the whole internet and do not find an answer on the question - how I can add the vendor prefixes support for my css files on production build?
So, I found two articles on this question, but it does not help me `.
https://medium.com/#kitze/configure-create-react-app-without-ejecting-d8450e96196a
https://medium.com/#ruanjian/configure-css-for-create-react-app-8681c6eb5f00
You don't need to use any vendor prefixes if you have created your React app by the script create-react-app, it does use autoprefixer.
I have an application that was created from create_react_app then ejected, with no modifications.
Everything works as expected when running the dev version.
Unfortunately when I do npm run build and run this via serve -s build my styles are not working.
The .css files are being found and compiled into a single minified version. But the problem is that the markup that is generated is having the class name prefixes changed to 'T-' instead of the prefix in the compiled .css file. (i.e) MyApp-header is getting changed to T-header, but in the minified css file, it still refers to MyApp-header.
prefix changed to T-
Any help would be appreciated.
This issue turned out to be caused by some nuance of using this...
#SuitCssify.decorator
I was evaluating this library for potential use in a project, and didn't discover this issue until trying to produce an actual production build.
I've since abandoned this approach and changed my configuration to use "CSS Modules" which are working out great. I would provide a link, but my reputation only allows me one link per post. ;(
my 'webpack.config.[dev & prod].js' changes to enable css modules
I was wondering if someone could help me with the following problem:
I have a web project in visual studio and I am using SASS for styling. I use Grunt to execute SASS and compile the .scss files to .css files. But for this to work Ruby must be installed on my system together with a SASS module. When someone else does a checkout of my project they cannot run SASS if they don't have ruby intalled on their system with this SASS module.
Is it possible to add a ruby installation (executable) with the SASS module to my project so that when someone else does a checkout of my project they can run SASS without having ruby installed on their system.
Thx in advance for any help, also this is my first question on stackoverflow ever, tips are welcome.
(Things I have run into but will probably not work are: Less, node-sas)
I don't think you'll be able to easily add a Ruby installation executable with your project. And I don't think you should.
Have a look on libSass, which was created and maintained by Sass authors. This library allow non-Ruby users to compile Sass. You've got plenty wrappers for various languages, like .NET, Java, JS, PHP, Python...
I think this could be a workaround that fit your needs.
I was looking at SASS vs LESS and ended up liking SASS a lot more.
However, I don't really have access to ruby/gems/ all that to get SASS up with everything on my server.
It seems like LESS can just be put in with 2 subsequent links in the header. is this correct?
If so, I'd probably just use LESS - since preprocessing is better than not.
SASS > LESS > CSS - so atleast I'd be a step above if that's the case.
You don't need to run Ruby on the server for SASS, typically you compile it locally before deploying it online.
I prefer SASS, mainly because it's what I used first though, they are very similar.
I use Compass.app to handle all the techie setup bits on my laptop.
I create a project entry;
Define what folder to watch for changes;
Define where I want the output file to go (typically the root of your theme folder);
Enjoy the automatic generation of style.css
Hope this helps.
All the best, Karl
Maybe you can use this (beta) Wordpress plugin for compiling LESS on shared hosts (and local servers). It uses the reference version of less.js and not a PHP port of it.
Poor man's less.js