Following various vue cli example to successfully implement scss file into the vue file, the page now loads with css imported but I cannot inspect from which file / line number the css declaration comes from, all it says in chrome console is within the not from the actual file like "margin.scss line 40".
here is my vue.config.js
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: ["#/src/css/index.scss"]
}
},
here is my App.vue
<template>
<div >
</div>
</template>
<style lang="scss" >
#import "./css/index.scss";
</style>
and here is what I see,
Activate sourcemaps:
module.exports = {
css: {
sourceMap: true,
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: ["#/src/css/index.scss"]
}
},
https://cli.vuejs.org/config/#css-sourcemap
Related
i'm new to vue js an wanted to write a fancy little demo.
I was trying to use tailwindcss in a new project.
I've created the project with
vue create vue-tailwind-template
and added tailwind with
vue add tailwind
I removed the demo component "helloworld" an all styles. In App.vue i try to use an div with class "bg-red", but no red background in output. These are my project files. Does anybody see the problem? Thank you in advance.
Sven
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div class="bg-red"><p>Hallo</p></div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
createApp(App).mount('#app')
Problem solved.
Classname "bg-red" doesn't exist. I had to use a number to define color intensity, e.g. "bg-red-500"
I create a laravel application with jetstream and inertia-vue stack for my new project problem is Tailwindcs version 2 using postCss and it doesn't support #apply directive inside vue components but inside .css file it works fine I don't want that because that css file will load my every page I just want short inline utility classes with #apply directive but I can't, How Can I achieve that.?
inside my vue template
<template>
<div class="mt-4">
<label for="hello">Hello</label>
<input id="hello" class="input"/>
</div>
</templete>
<style scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>
output inside browser like this
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
webpack.config.js
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
tailwind version : "^2.0.1",
laravel version : 8.x,
jetstream version : 2.x,
inertiajs version: "^0.8.2"
You have to set the lang="postcss" attribute on the <style> tag as Tailwind is a PostCSS plugin.
So change this
<style scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>
To this
<style lang="postcss" scoped>
.input {
#apply bg-gray-200 border h-10
}
</style>
A workaround that can temporarily solve this problem:
.
In webpack.config.js
const path = require('path')
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js')
}
},
module: {
rules: [
{
test: /\.(postcss)$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
.
In postcss.config.js (if this file not exist, just create it)
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
]
}
.
Now you can use in Vue file by adding lang="postcss
<style lang="postcss">
.input-form {
#apply block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}
</style>
.
This answer is based on the discussion here: https://github.com/laravel-mix/laravel-mix/issues/2778#issuecomment-826121931
Creating postcss.config.js & adding the below snippet worked for me:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
The vuetify documentation only provides example for injecting sass variables using vue-cli configuration in vue.config.js
https://vuetifyjs.com/en/customization/sass-variables#markup-js-vue-config-sass-variables
What is the correct way to provide the modified vuetify variables when not using the CLI?
I am upgrading an older project from v1 (stylus) to v2 (sass) and I need to override some variables, lets say I only need to change the font-family to Arial.
I am also using treeshaking with vuetify.
Now I am kind of stuck because I don't know where to import the style overrides... Importing these in src/main.ts obviously does not work.
I have created a minimal repro here: https://github.com/Sharsie/vuetify-theme-repro/
What I have so far is a webpack config in build directory and style overrides in src/styles/main.scss
$body-font-family: Arial;
#import "~vuetify/src/styles/styles.sass";
Running the project creates a simple page that prints out computed styles for the v-app container
<v-app id="app">
<v-container>
<v-content>
<p>Wanted font-family: Arial</p>
<p>Current font-family: {{ fontFamily }}</p>
</v-content>
</v-container>
</v-app>
After digging through the source code of vue-cli, I figured out that the config just gets passed to sass-loader options, so the solution was pretty straightforward:
Instead of providing the stylesheet with variables through vue.config.js as such:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/styles/main.scss"`,
},
},
},
}
You can provide it directly to sass-loader options in webpack config like this:
module.exports = {
...
module: {
rules: [
...
{
test: /\.(s?c|sa)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: sass,
sassOptions: {
fiber: fibers,
},
prependData: `#import "~/styles/main.scss"`,
},
},
],
}
...
]
}
...
}
or for sass-loader<8.0.0
options: {
implementation: sass,
fiber: fibers,
data: `#import "~/styles/main.scss"`,
},
i have a modularized template that uses Sass-loader to compile scss files that every component has, but using this in laravel with laravel-mix won't work, that doens't do nothing
i'm using the newest version of laravel (5.8) with php7 and Vue JS
example of component:
<template>
<div :class="$style.logo">
<div :class="$style.logoContainer">
<img
v-if="!settings.isMenuCollapsed || withDrawer"
src="resources/images/logo-inverse.png"
alt
>
<img
v-if="settings.isMenuCollapsed && !withDrawer"
src="resources/images/logo-inverse-mobile.png"
alt
>
</div>
</div>
</template>
<style lang="scss" module>
#import "./style.module.scss";
</style>
here is a component with his style.scss file to be compiled as module. Classes in here must be saved into $style.
i use this packages in package.json:
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
My babel.config.js:
module.exports = {
presets: ['#vue/app'],
plugins: [
[
'import',
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
],
],
}
and finally, my webpack.mix.js file:
const mix = require('laravel-mix');
require('laravel-mix-alias');
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader",
options: {
modules: true
}
}
]
}
]
}
});
mix.alias({
'#': '/resources/js'
})
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
the thing is, that classes into scss files of components are not compiled, and because of that, html tags after compilation do not possess styles, loosing al the structure of my template.
this has to be the compiled file component:
<div class="index_logo_hObJ1">
<div class="index_logoContainer_1zCMH">
<img src="resources/images/logo-inverse.png" alt="">
</div>
</div>
and this is what i get:
<div>
<div>
<img src="resources/images/logo-inverse.png" alt="">
</div>
</div>
As you can see, no classes were injected into divs, and i get no errors on compiling, what am i doing wrong?
i didn't use the style "module", i couldn't figure that out, but i manage to use style "scoped", it's close to it. To do so i added this to my webpack.mix.js file:
let mix = require('laravel-mix');
require('laravel-mix-alias');
mix.alias({
'#': '/resources/js'
})
mix
.setPublicPath('./default/public')
.js('resources/js/app.js', 'default/public/javascript/')
.sass('resources/sass/app.scss', 'default/public/css/')
.sourceMaps()
.version();
;
mix.options({
extractVueStyles: true,
processCssUrls: false
});
and then you can use this on your .vue components:
<style lang="scss">
#import "./style.module.scss";
</style>
and the .css file it's just normal.
When using Webpack is pretty straight forward to add an alias for scss files in a Vue SFC, e.g:
<style lang="scss">
#import "~scss/config/config";
...
</style>
Would be the following in Webpack:
alias: {
sass: path.resolve(__dirname, '../scss/')
}
How would you add the same kind of alias in Rollup via rollup-plugin-vue?
I've tried adding a number of postcss plugins, e.g
import importer from 'postcss-import';
vue({
css: false,
style: {
postcssPlugins: [
importer({
path: null,
addModulesDirectories: [path.resolve(__dirname, '../shared')]
})
]
}
}),
I've also tried: rollup-plugin-alias, rollup-plugin-includepaths and some other postcss plugins.
I don't think you can use postcss plugins within the Vue plugin to accomplish this, because it compiles the scss before it gets passed to postcss.
Using rollup-vue-plugin I've been able to use style.preprocessOptions.scss.includePaths to alias directories, in my case pointing to node_modules:
//rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
...
plugins: [
VuePlugin({
style: {
preprocessOptions: {
scss: {
includePaths: ['node_modules'],
}
}
})
]
...
// some .vue file
<style>
#import 'some-node-module' //resolves to 'node_modules/some-node-module'
</style