I tried to import styles into my vuejs file by doing this
<style scoped>
#import '../assets/front/css/bootstrap.min.css';
#import '../assets/front/css/all.min.css';
#import '../assets/front/css/slick.css';
#import '../assets/front/css/simple-line-icons.css';
#import '../assets/front/css/style.css';
</style>
But anytime i run npm run dev i get this error
WARN [vite:css] #charset must precede all other statements
The project is in Nuxt3 by the way.
Here is the link to Stackblitz
Related
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>
I try to do something realy basic what is described in spartacus documentation https://sap.github.io/spartacus-docs/css-architecture/#skipping-specific-component-styles
At file src/styles.scss:
$styleVersion: 4.3;
$skipComponentStyles: (cx-mini-cart, cx-product-carousel, cx-searchbox);
#import '~#spartacus/styles/index';
But looks like $skipComponentStyles variable not works as expected, no changes at UI. Is this a bug of lattest release or do I miss something?
It was not working for me too before I changed the styles imports from angular.json to styles.scss.
Before:
"styles": [
"src/styles.scss",
"src/styles/spartacus/user.scss",
"src/styles/spartacus/storefinder.scss",
"src/styles/spartacus/product.scss",
"src/styles/spartacus/order.scss",
"src/styles/spartacus/checkout.scss",
"src/styles/spartacus/cart.scss"
],
After:
"styles": [
"src/styles.scss"
],
styles.scss
$skipComponentStyles: (cx-mini-cart);
#import '~#spartacus/styles/index';
#import "styles/spartacus/user";
#import "styles/spartacus/storefinder";
#import "styles/spartacus/product";
#import "styles/spartacus/order";
#import "styles/spartacus/checkout";
#import "styles/spartacus/cart";
#import 'styles/custom-styles';
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.
I'm starting a new project using the Vue CLI, and this is my first time using it.
I'm using a CSS framework (Spectre), which I installed via NPM. I'm now trying to import only parts of it. I have found a way to get it to work, but it's quite cumbersome, and I'd like to find a better way using the includePaths option.
Basically, the whole thing can be summarized like this: I have a *.scss file that looks like this:
#import "./node_modules/spectre.css/src/accordions";
#import "./node_modules/spectre.css/src/avatars";
#import "./node_modules/spectre.css/src/badges";
#import "./node_modules/spectre.css/src/breadcrumbs";
...
and I obviously want to simplify it by removing the ./node_modules/spectre.css/src/ part from all the imports.
In vue.config.js, here's what I have:
module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }
But that doesn't work.
I've looked at the following questions:
How to #import external SCSS properly with webpack and Vue.js?
Webpack-simple + vue-cli with SASS - Can't compile?
Using sass-resources-loader with vue-cli v3.x
But couldn't find an answer, or couldn't figure it out.
The URL transform rules of Vue CLI projects allow using ~ as a path alias into the project's node_modules/, so you could do:
#import "~spectre.css/src/accordions";
#import "~spectre.css/src/avatars";
#import "~spectre.css/src/badges";
#import "~spectre.css/src/breadcrumbs";
No changes to your Vue config is needed.
I'm importing bulma into Vue (installed via vue init webpack-simple ) and I can't seem to figure out how to get it to load my own external sass files.
I have it set up like this:
<style lang="sass" src="./sass/initial-variables"></style>
<style lang="sass" src="bulma"></style>
The tag pulling bulma in works just fine, but I get an error looking for my initial variables file:
ERROR in ./src/App.vue
Module not found: Error: Can't resolve './sass/initial-variables' in
'/Users/johnbriggs/Sites/mimismarket/src'
In my src folder, I have a sass directory with initial-variables.sass as a file.
What am I missing here?
It looks like you're missing the .sass. extension in your <style> tag. Webpack might take that relative import literally.
One thing I like to do to keep my single-file components clean is to have one <style> tag and then #import my SASS files:
<style lang="sass">
#import 'bulma'
#import './sass/initial-variables' // we don't need the extension here
</style>
Another thing to keep in mind is that you can import CSS/SASS files in your JavaScript, too. It's really handy for global stylesheets:
// main.js
import 'bootstrap/dist/css/bootstrap.min.css'
You can do the following in your webpack.config:
loader: 'vue-loader',
options: {
extractCSS: true,
loaders: {
sass: ExtractTextPlugin.extract({
use: 'css-loader!postcss-loader!sass-loader?indentedSyntax&data=#import "./sass/initial-variables.sass"',
fallback: 'vue-style-loader'
})
}
}