I am trying to integrate Tailwind CSS in the latest Quasar version (3.5.4)
I have installed Tailwind CSS using npm install tailwindcss
and after that I have added require('tailwind') in .postcssrc.js but it results in an error:
TypeError: Cannot read properties of undefined (reading 'config') tailwind typescript
Go into your Quasar project and run:
run npm i -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7autoprefixer#^9
Then go to .postcssrc.js and add:
module.exports = {
plugins: [
// to edit target browsers: use "browserslist" field in package.json
require('autoprefixer'),
require('tailwindcss')
],
}
Then in any Vue.js component add this in the style tag import:
<style>
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
</style>
Related
I want to import a SCSS file in my Nuxt project.
For this I tried to follow the documentation where I simply add the path with filename in css file as:
nuxt.config.js
css: ['#/scss/_introPage.scss]
But it gives error as
Cannot find module '../scss/_introPage.scss'
My folder structure:
> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json
How can I include the SCSS file and apply the global CSS into my project?
If anyone needs any further information please let me know.
Thank you everyone for your input.
I had to install sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers
Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js
example:
// nuxt.config.js
export default {
// other options
css: [
// Load a Node.js module directly (here it's a Sass file)
'bulma',
// CSS file in the project
'#/assets/css/main.css',
// SCSS file in the project
'#/assets/css/main.scss'
],
// other options
}
in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.
SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus
to share your global style files(scss, sass, & ... ) and other good features
you can use Nuxt Style Resources.
Share variables, mixins, functions across all style files (no #import
needed)
Add #nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:
yarn add -D #nuxtjs/style-resources or npm install --save-dev #nuxtjs/style-resources
and then you can add '#nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:
// nuxt.config.js
export default {
// other options
buildModules: [
'#nuxtjs/style-resources',
],
styleResources: {
// your settings here
scss: ['#/assets/scss/_introPage.scss'],
sass: [],
less: [],
stylus: [],
hoistUseStatements: true // Hoists the "#use" imports. Applies only
to "sass", "scss" and "less". Default: false.
}
// other options
}
for more information see this link https://www.npmjs.com/package/#nuxtjs/style-resources
I just started a project with Vue and I want to make of Sass. I have done everything needed to set Sass globally but seems vue isn't recognizing the sass files. Do I have to watch and then compile sass to css in order to make it work?
I installed Node-sass and vue-loader
Set up the vue.config.js
But whenever I start up Vue server,I get an error message saying the variables I set in the sass files are not defined, of which I defined them in the _variables.scss
This is the Vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/assets/sass/abstracts/_mixins.scss";
#import "#/assets/sass/abstracts/_variables.scss";
#import "#/assets/sass/base/_base.scss";
#import "#/assets/sass/layouts/_sidebar.scss";
`
}
}
}
}
I got the following error :-
error in ./src/components/SideBar.vue?vue&type=style&index=0&id=3eca7188&lang=scss
Syntax Error: SassError: Undefined variable: "$color-main".
on line 10 of src/components/SideBar.vue
>> background: $color-main;
--------------^
If you are using vue-cli or vite, you don't have to do anything but just consuming scss.
In case of importing variables in all sfc, https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ follow this.
We have a pretty standard Vue CLI environment. It currently ingests a vue plugin we created via the install method. The plugin is also a Vue CLI environment and lives as a git submodule in the repo.
Currently the parent uses sass and sass-loader packages to transpile. It's configured in the vue.config.js settings, like so:
module.exports = {
// Other properties and settings removed to simplify
css: {
loaderOptions: {
sass: {
data: `
#import "#/styles/global.scss";
`
}
}
}
The global.scss just houses all our style includes.
The plugin is set up in a similar way, but none of the code is getting ingested into the parent. Which totally makes sense, as there is nothing importing/building the plugins style files. Anyone know how to import and transpile plugin sass style sheets? Thank you!
I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.
Here's my assets/css/main.scss file:
#import "~bulma/sass/utilities/_all.sass";
#import "~bulma/bulma";
My nuxt.config.js modules section:
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
And my .vue file:
<template>
<section class="container">
<div class="my-title">
About
</div>
</section>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.my-title {
color: $primary;
}
</style>
Here's the error message in the terminal:
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
# ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
# ./pages/about/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Can anyone see what I'm doing wrong?
UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.
Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:
modules: [
'#nuxtjs/style-resources'
],
styleResources: {
scss: [
'./assets/css/main.scss'
]
},
This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.
Don't forget install node-sass and sass-loader to use sass/scss file
in your app as mentioned by nuxt documentation.
// nuxt.config.js
build: {
loaders: {
sass: {
prependData: "#import '~bulma/sass/utilities/_all.sass;",
}
}
}
I am trying to port a React component to Stencil.
The component .scss file has an #import for another A.scss file. That A.scss file #import the bootstrap-sass/assets/stylesheet/bootstrap/_variables and #import another B.scss file.
Can Stencil handle that or do I need to merge everything in one file?
You can import other Sass files; you don't need to merge everything to one single file.
You can keep using Sass as you are using it with React. Just keep in mind that to be able to use Sass with Stencil, you have to install the Sass plugin and add the plugin to the plugins array in your stencil.config.js file.
For more information, check the Sass documentation on the Stencil website.
In your stencil.config.ts (or stencil.config.js) file:
export const config: Config = {
plugins: [
sass({
includePaths: [path.resolve(__dirname, 'path/to/styles')]
})
]
};
Yes, it can handle Sass files and their imports.
Install package stencil/sass:
npm i #stencil/sass -D
In your stencil.config.ts file:
import { Config } from "#stencil/core";
import { sass } from "#stencil/sass";
export const config: Config = {
// ... You configuration
plugins: [
sass({
includePaths: ["./node_modules/"],
}),
],
};
In the above example, we're telling the Stencil compiler to compile Sass files. The includePaths array tells the compiler the directories/files it should look into for the Sass files.
In order to use #import from a Node.js package, all you need is:
#import "~bootstrap-sass/assets/stylesheet/bootstrap/_variables";
Note: The ~ operator here is necessary when not importing using relative paths(./style.scss, ../../style.scss, etc.)
If you are importing the b.scss file using relative paths (./b.scss, ../b.scss, etc.), you won't need to add anything else to Sass plugin configuration.
I never tried multiple imports, but I can't see why this wouldn't work.
To get Stencil working with .scss, you should install this plugin, as described here.
npm install #stencil/sass --save-dev
Then add this property to config in file stencil.config.ts.
plugins: [
sass()
]