I am using tailwind with laravel mix and postcss. I get the error:
#apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default 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.
I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.
app.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "variables";
#import url("https://fonts.googleapis.com/css?family=Nunito");
#import "#fortawesome/fontawesome-free/css/all.min.css";
body {
#apply text-grey-default;
}
webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config.js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};
I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.
Related
Vuetify seems to define it's default dark theme here, and I would like to overwrite some of those values with custom colors.
It seems like scss is the way to overwrite this. However, when I try to change the backgound color, I don't see any change.
#import '~vuetify/src/styles/main.sass';
$material-dark: () !default;
$material-dark: map-deep-merge(
(
'background': #FFFF00
),
$material-dark
);
I'm importing it in main.js (import "./example.scss"), and I know it's loading (syntax errors make it crash), but the dark themed background doesn't change. If this isn't how vuetify styling works, what is?
For vue-cli, the scss style must be included in vue.config.js, ie.
module.exports = {
"configureWebpack": {
},
"css": {
"loaderOptions": {
"sass": {
"prependData": `#import "~#/styles/main.scss"` // change the route with you main.scss location in yout proyect
}
}
},
"lintOnSave": false,
"transpileDependencies": [
"vuetify"
],
"publicPath": ".",
}
Also, the scss file should import styles.sass instead of main.sass. ie.
#import '~vuetify/src/styles/styles.sass';
I'm trying to use #apply in my sass file, and getting the error in the title when I do npm run dev or npm run watch. I'm using Laravel, and using Laravel Mix. Here is my webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
This exists in my app.css
...
.bg-blue {
background-color: #47cdff;
}
My app.scss:
// Tailwind CSS
#tailwind base;
#tailwind components;
#tailwind utilities;
// Custom CSS
.section {
#apply .px-4;
}
.button {
#apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
box-shadow: 0 2px 7px 0 #b0eaff;
}
Just override the default color pallete, you can do so using the theme.colors section of your tailwind.config.js file :
theme: {
colors: {
white: '#FFFFFF',
blue: '#007ace',
}
}
Then an easy trick never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files.
My goal is to get the following code working in .vue files in Laravel project:
<style scoped lang="scss">
#import 'variables'; // <-- file not found
// ...
</style>
Currently, whenever I try to run the above code, the "file not found" error is thrown by the sass compiler.
My current webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
tools: 'resources/assets/sass/tools' // <-- does not work
}
}
});
So the question is, how do I configure laravel-mix, so that I am able to include global sass files without having to use relative paths?
this worked for me :
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
resolve: {
alias: {
'blah': resolve('resources/assets/sass/blah')
}
}
#import '~blah/blah'
If you want a global variable, do not use scoped in the <style> tag
I'm trying to create a custom build of bootstrap 4 using webpack, but it won't compile.
I have bootstrap 4 here:
/node_modules/bootstrap/scss
I create my own app.scss file to import the various parts of bootstrap that I want:
#import "variables";
#import "mixins";
#import "custom";
....
In my webpack file I have:
mix.sass('resources/assets/sass/app.scss', 'public/css', null, { includePaths: ['node_modules/bootstrap/scss/'] });
I've also tried:
mix.sass('resources/assets/sass/app.scss', 'public/css', { includePaths: ['node_modules/bootstrap/scss/'] });
You can import bootstrap in app.scss with:
..
#import "~bootstrap/scss/variables"
#import "~bootstrap/scss/mixins"
..
The ~bootstrap is resloved to the npm package. This way you won't have to configure the mix file.
sass gives an error message
Error: File to import not found or unreadable: helpers/mixins.scss
Parent style sheet: .../temp/styles/all.scss
on line 1 of temp/styles/all.scss
>> #import 'helpers/mixins.scss';
^
at this point, the code looks like
#import 'helpers/mixins.scss';
#import 'helpers/variables.scss';
#import 'helpers/fonts.scss';
#import '../../node_modules/bootstrap/scss/bootstrap';
#import '../../node_modules/fotorama/fotorama.css';
.navbar {
#extend navbar-light;
#extend bg-faded;
}
gulp task looks like this
var blocks = 'app/blocks/**/*.scss';
gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
.pipe(concat('all.scss'))
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false
}))
.pipe(gulp.dest('temp/styles'))
));
How to solve this problem?
how to make galp correctly understand the way?
In your gulp file you can declare sass paths, eg.
var sassPaths = [
'node_modules/bootstrap/scss',
'node_modules/fotorama'
];
These are relative to your gulp file.
Then set include paths inside your list of sass arguments
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false,
includePaths: sassPaths
}))
Then in your sass make sure your imports are either relaitve to the parent sass file or relative to one of the include paths.