How can I overwrite sass variables defined in a svelte package?
I've published an npm package built with sveltekit & sass.
In my main sass file I've defined some variables for components colours.
After importing the package in a demo project, I've tried to change those variables hoping imported component styles changed. However it seems like those variables are isolated and the components are built using orignal ones no matter if they're redefined on parent component.
In my sveltekit package:
styles.scss
$primary: #14cabf !default;
Button.svelte
<style type="text/scss">
button {
background-color: $primary;
}
</style>
svelte.config.js
const config = {
preprocess: preprocess({
scss: {
prependData: `#import './src/lib/style/style.scss';`
}
}),
kit: {
adapter: adapter(),
vite: {
resolve: {
alias: {
$components: path.resolve('./src/components')
}
}
}
}
};
export default config;
In a demo project importing my package
style.scss
$primary: green; //this variable works and can be used but won't change button's background colour
Is there a way to export/process/redefine $primary and change that way button's colour?
Thanks for your time!
when importing a global scss file into my project via:
import into main.js, didn't let me use the variables i defined but classes and ids work.
import into App.vue, didn't load any styles at all. and i removed the scoped of course
import into vue.config.js as following
module.exports = {
transpileDependencies: [
'vuetify'
],
css: {
loaderOptions: {
sass: {
prependData: '#import "#/scss/_variables.scss";'
}
}
}
}
breaks my whole application and gives me tons of errors in cmd rel. to Vuetify.
can anybody tell me how i can import a global scss into a SPA made with latest Vue CLI and Vuetify?
You don't need to import the variables explicitly. According to the official documentation https://vuetifyjs.com/en/customization/sass-variables vue-cli-plugin-vuetify do this itself. To use global variables just follow these simple steps.
Add Vuetify using command vue add vuetify This will automatically add all the required dependency like vuetify-loader, vue-cli-plugin-vuetify, etc.
Make a variables.scss file in src/{scss, sass or styles} directory. As these are the default directories for global variables Example variable file.
Run the server, you are ready to go.
In general, this seems to work now:
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: '#import "~#/assets/scss/_variables.scss";'
}
}
}
}
My project is currently Vuejs which use BootstrapVue components (seems to use bootstrap 4 css).
I am trying to use Tailwind css for new custom components.
Is it possible to use both of them at same time?
Thank you.
You can solve classes conflict using a prefix
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
BUT, most likely you will have a problem with normalize.css, which used in #tailwind base
Possible, Yes. Is it recommended, NO.
There are many classes that are gonna contradict with
each other e.g.
.container (Bootstrap)
.container (Tailwind)
.clearfix (B)
.clearfix (T)
And the list goes on...
My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.
Option 1: Adopt or recreate classes
If you only need one or two classes, for example from the color system of Tailwind, you could also copy them.
Some characters would have to be masked, e.g:
// style.css
.hover\:text-blue-900:hover,
.text-blue-900 {
color: #183f6d;
}
That's what I did at the beginning of a project, where bootstrap is the main framework.
If it should be several colors and functions, you can also build this with SCSS quickly. In the long run, however, in my opinion, not the best and cleanest solution.
Example for this:
// style.scss
(...)
#each $name, $hexcode in $tailwind-colors {
.hover\:text-#{$name}:hover,
.text-#{$name} {
color: $hexcode
}
}
}
Full code (Github Gist)
Option 2: Integrate Tailwind
But as soon as more functionalities should be added, or you want to build it cleaner, you can do here with the prefix mentioned by the documentation as Ostap Brehin says.
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
The normalized definitions can be removed by disabling preflight:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
Better check the generated CSS file.
Here is my full tailwind.config.js file:
// tailwind.config.js
module.exports = {
content: [
'./**/*.php',
'../Resources/**/*.{html,js}',
],
safelist: [
'tw-bg-blue-800/75',
{
pattern: /(bg|text)-(blue)-(800)/,
variants: ['hover'],
},
],
prefix: 'tw-',
theme: {
extend: {},
},
corePlugins: {
preflight: false,
},
plugins: [],
}
Yes, you can use Tailwind and Bootstrap together.
However, you need to do some configuration to your tailwind. The first thing is to add a prefix and then turn off the preflight. And if you are not using Tailwind JIT then also make the important as true. If you are using Tailwind JIT then you can use "!" before the class to make it important. For example "!tw-block".
Here is a suitable configuration for Tailwind JIT/CDN:
<script>
tailwind.config = {
prefix: "tw-",
corePlugins: {
preflight: false,
}
}
</script>
If you are not using CDN, use this configuration:
module.exports = {
content: ["./**/*.html"],
prefix: "tw-",
important: true,
corePlugins: {
preflight: false,
}
}
I have written a whole blog on it: https://developerwings.com/tailwind-and-bootstrap-together/
As long as there's no name collision in 2 libs (which I don't think they are), they will work just fine.
But I don't think you should. Because it will break the unification of the project and will make it harder to maintain.
Im my webpack config I add a path
"mixins": path.resolve(
__dirname,
"resources/assets/sass/mixins/mixins.scss"
),
Which means in all my single file components I use
<style lang='scss' scoped>
#import '~variables';
This works fine but what I am finding is this file is used in 95% of components so the import really is unnecessary. I want these vars available everywhere.
How can I globally add my SASS to my single file components without the need for the import in every file?
Well, Load your common CSS from Webpack and make it available globally for all the component. Webpack configurations are as below.
sass-loader also supports a data option which allows you to share common variables among all processed files without having to explicit import them
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/scss/_variables.scss";
#import "#/scss/_mixins.scss";
`
}
}
}
};
In here, specifing the sass loader under the loaderOptions option. Just like that, all the code in those files will be available in the global scope. So from any component we can use it out of the box:
And now you can able to access the variable in your Vue SFC without importing it.
<style lang="scss">
.classroom {
/* No need to import, it just works \o/ */
background: $bg-classroom;
}
</style>
Reference Official Docs here
Hope this helps!
I am trying to use a less file in my vue-cli created project.
Also the question if this is best practice. Earlier I added webpack globally and started a watcher and added a webpack.config.js
This time I created the project with vue-cli / vue ui and the doc says I have to use a vue.config.js where I do this:
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
less: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/all.less";`
}
}
}
}
I added the file in src/all.less and also tried src/assets/less/all.less and changed the path in the config file. Both do not seem to work tho.
For me the issue was I had the language for one component set as "less" when I had in my config set up just vanilla css:
<style lang="less" scoped>
//styling here
</style>
instead of
<style lang="css" scoped>
//styling here
</style>
If you are using vue cli 3 . just use less right in your vue file, just set the lang to "less" or "scss" - pretty handy. There should be no additional configuration on the webpack side :
<style lang="less">
#import './less/index.less';