How to apply a Tailwind CSS classname that includes a dot with Less? Escaping (\) didn't worked.
I can use this code without any problems in Sass:
#apply py-0.5;
Syntax error: The 0.5 class does not exist. If you're sure that
0.5 exists, make sure that any #import statements are being
properly processed before Tailwind CSS sees your CSS, as #apply can
only be used for classes in the same CSS tree. (7:4)
Other Tailwind CSS classnames just work fine.
This is most likely related to how Less parses the input. You could use ~ to escape the class name.
#apply ~"py-0.5";
Related
I'm trying to make use of the #extend of sass so that I don't mix markup and html together. As explained in this article.
In short, instead of writing
<div class="alert alert-primary>This is an alert!</div>
You'd instead write something like
<div class="banner">This is an alert!</div>
.banner {
#extend .alert;
#extend .alert-primary;
}
Such that styling and content stay nicely separated.
The problem: When using this with webpack (sass-loader) and components (e.g. Vue.js or Angular), I run into a problem where including a bootstrap partial will now result in the complete compilation of the entire bootstrap file into css.
This results into a class .btn[data-v-3614b62c] and another .btn[data-v-45ac961c] etc. for every component that uses the partial bootstrap/scss/_buttons.scss and that for all classes defined in that partial.
Even if I don't use it.
In the long run, this will be detrimental for the application since its size will increase rapidly and I image the browser will slow down with that many css classes to parse.
The question(s): How do I make sure sass doesn't duplicate the entire imported partial?
Can I enable some kind of tree shaking where it only includes the classes I use?
Do I have to change my file structure so that sass understands I only need certain classes inside the partial rather than everything?
Code example
This is a vue component using bootstrap
<template>
<form class="form">
<input type="text" class="input">
<button class="button-submit">Send</button>
<button class="button-cancel">Cancel</button>
</form>
</template>
<style lang="scss" scoped>
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
#import "node_modules/bootstrap/scss/root";
#import "node_modules/bootstrap/scss/buttons";
.form {
.button-submit {
#extend .btn;
#extend .btn-primary;
}
.button-cancel {
#extend .btn;
#extend .btn-danger;
}
}
</style>
This will result in the entire partial _buttons.scss to be compiled into css instead of only .form .button-submit and .form .button-cancel.
Live example
https://codesandbox.io/embed/musing-feynman-8w2kx.
To see the problem I have:
Right click on the example to the right and click Inspect
In the Elements tab, navigate to #document > html > head
At the bottom you'll have several style elements
Two of them will contain all the button css where only the [data-v-######] attribute is different and at the end are my couple of lines code.
Note that the same happens for production builds. The css is then simply bundled up in a single file, but duplicates are still around.
If you are #importing the same CSS rules into different components, then you will get the same rules duplicated across all modules. That's just how it works.
You should only be #importing modules that define abstract declarations like variables, mixins, functions, etc, not actual styles.
The only way you can de-duplicate the styles globally is if you use something like mini-css-extract-plugin to extract and combine all the CSS into a single file and then run it through something like cssnano which will discard duplicate rules (although with scoped CSS, this probably won't work).
Modules are typically built independently of other modules and there isn't a simple way to know if a rule has been declared already by a previous module. In development you may be using style-loader which operates on a per-module basis and injects styles into the webpage on demand; there's just no way it can work out which styles should be injected in case some particular style has already been injected by another component.
It just gets messy; keep it simple by not duplicating styles in the first place.
If you really want to use #extend, then make a separate .scss file which is the only module that #imports the bootstrap styles, and define all your extensions in there.
I am using less css in my vue components.
Some of my components require the use of '>>>' deep selector for elements that I add programatically. However I get 'Unrecognised input' error when I do so.
I want to use less syntax to import variable for colors, font-size, etc. to keep those core variable in one file and use them in all of my components.
Is there a workaround for this?
Thanks
As described here in the Vue Loader docs, if your preprocessor does not allow >>> you can use ::v-deep, which should be ignored by the preprocessor because it is syntactically valid CSS.
I am trying to override the .Select-control css component in react-select.
I want to set a custom height (the default is 36px) so it will look more closely to my other input fields
I have tried to add my own className prop as suggested in the docs however it does not seem to work and just pushes everything down (which makes sense since it's the wrapper for the component)
Is it possible to override the component itself?
I just started working with react-select and ended up overriding the components to bring the elements in line but also had success with passing in my own classes.
.Select-control {
height: 32px
}
I noticed that some of the css selectors can be pretty specific so referencing the css file helped to make sure I overrode the included styles. If you're using ES6 syntax I think you need to import your css after importing the react-select css in order to override.
Hope that helps
How can completely remove the styling of inputs in materializecss? Changing the CSS alone doesn't seem to work as expected.
Use the Materialize class "browser-default".
For example:
<input type="text" class="browser-default"/>
Documentation here: http://materializecss.com/helpers.html#browser-default.
The easiest way to remove the styling of inputs in materializecss is to download the sass file and remove the elements you dont wish to be imported. After that you just have to compile sass to css.
View the source of this if you want to download the compiled css file from which the input styling was removed.
How to install/use sass
How do I get Less to work with an aurelia cli project?
I've added a style.less file under src and I can see it's bundled into app-bundle.js. But I am not sure if or how I need to add reference to it in app.html?
I've added a div tag
<div class="test-less">Test less</div>
in app.html using a class in my style.less file but when I run the app the css is not used - even though I can see the css in the app-bundle.js:
define('text!style.css', ['module'], function(module) { module.exports = ".test-less {\n color: #FF0000;\n background-color: green;\n}\n"; });
I'm not sure what the 'define..' actually does - ie does it inject the css into the DOM? It is listed beneath the define statement which includes the app.html - so maybe it's out of scope - so not usable in app.html???? If so, how should one use Less with Aurelia (project created by aurelia CLI)
Thanks
Tim
As #Rabah-g stated - I needed to add a require eg:
<require from="style.css"></require>
To figure out what path to use - I just used what was stated in the 'define' statement in app-bundle.js. In this case simply 'style.css'.