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.
Related
I have installed #fortawesome/fontawesome-free package using npm. The latest Laravel application uses vite by default. I am unable to solve this issue. Any help would be much appreciated. My vite.config.js is
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { viteStaticCopy } from 'vite-plugin-static-copy';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
'resources/admin/css/app.css',
'resources/admin/js/app.js',
'resources/css/glide.css',
'resources/js/glide.js',
'resources/js/Sortable.js',
'resources/js/tinymce.js',
'resources/sass/app.scss',
'resources/admin/sass/app.scss',
]),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
},
viteStaticCopy({
targets: [
{
src: 'node_modules/#fortawesome/fontawesome-free/webfonts',
dest: '',
},
],
}),
],
});
I imported fontawesome scss files in app.scss. My app.scss file contains
#import "#fortawesome/fontawesome-free/scss/fontawesome";
#import "#fortawesome/fontawesome-free/scss/brands";
#import "#fortawesome/fontawesome-free/scss/regular";
#import "#fortawesome/fontawesome-free/scss/solid";
#import "#fortawesome/fontawesome-free/scss/v4-shims";
I tried using a third party library https://github.com/sapphi-red/vite-plugin-static-copy to copy webfonts of fontawesome package. Is there a better way than this?
I solved it by first installing sass pre-processor:
npm install -D sass
after that I imported all fontawesome scss files into my app.js file:
import './bootstrap';
import '#fortawesome/fontawesome-free/scss/fontawesome.scss';
import '#fortawesome/fontawesome-free/scss/brands.scss';
import '#fortawesome/fontawesome-free/scss/regular.scss';
import '#fortawesome/fontawesome-free/scss/solid.scss';
import '#fortawesome/fontawesome-free/scss/v4-shims.scss';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
It is quite easy if you are not adding it via npm. Copy entire fontawesome dir into resources dir (/resources/fontawesome), then declare variable in your scss file like (assuming you are doing it in a file inside /resources/sass:
$fa-font-path: '../fontawesome/webfonts';
and import fontawesome files:
#import '../fontawesome/scss/brands';
#import '../fontawesome/scss/solid';
#import '../fontawesome/scss/light';
#import '../fontawesome/scss/fontawesome';
Build script will copy files to your /public/build/assets dir and change urls and dev script will load them from your resources dir.
I'm trying to migrate from the now dead Tachyons framework to Tailwindcss. However, there's one block I haven't figured out how to overcome.
I use the jekyll-postscss Gem to enable postscss processing during jekyll build. Things appear to work well with the following setup:
assets/css/styles.css:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
postcss.config.js:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
...(process.env.JEKYLL_ENV == "production"
? [require('cssnano')({ preset: 'default' })]
: [])
]
};
tailwind.config.js:
module.exports = {
purge: [
'./_includes/**/*.html',
'./_layouts/**/*.html',
'./_posts/*.md',
'./*.html',
],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [
require('#tailwindcss/typography'),
],
}
With a jekyll build command, I can see the correctly generated styles.css file under _site/assets/css.
However, it doesn't work when I try to import other css or scss files. For example, if I modify the styles.css file into the following
assets/css/styles.scss:
---
---
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "test.css"
where test.css is in the same directory as styles.scss (assets/css/), postcss-import throws an exception
Error: Failed to find './test.css'
in [
/project
]
at /project/node_modules/postcss-import/lib/resolve-id.js:35:13
at async LazyResult.runAsync (/project/node_modules/postcss/lib/lazy-result.js:396:11)
I'm a bit confused as to why postcss-import does not see this file.
Because the css resource you imported is not in the resolved path, the default resolved path includes: root directory, node_modules, etc. Other paths can refer to the official documentation link.
You can try the following methods to solve this problem:
Modify the postcss configuration file postcss.config.js
module.exports = {
...
require('postcss-import')({
addModulesDirectories: ["assets/css"]
}),
...
};
Modify the main style file assets/css/styles.css
#import "assets/css/test.css"
I used a similar solution to what Donnie suggests, but I set the path instead of the addModulesDirectories, which resolved the issue for me. I didn't try the addModulesDirectories, so I don't know whether that might have also worked.
module.exports = {
...
require('postcss-import')({
path: ["assets/css"]
}),
...
};
Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel ?
Edit your tailwind.config.js and set purge.enabled = true:
const tailwindcss = require('tailwindcss');
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{vue,js,ts,jsx,tsx}']
},
...
};
Tailwind CSS - Optimizing for Production
The best strategy is to use generate a specific CSS specific to your need and deploy it on your own CDN
Below an example that explains how to configure TailwindCSS for a simple Html Project
First Step: create a package.json file
yarn init
Add tailwindcss postcss-cli and autoprefixer
yarn add tailwindcss postcss-cli autoprefixer -D
yarn add tailwindcss postcss-cli autoprefixer -D
Create a default configuration file for TailwindCSS
npx tailwind init tailwind.js -full
Create a postcss.config.js file
touch postcss.config.js
Edit the postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
],
purge: [
'./src/**/*.html',
],
};
Create a tailwind.css as follow
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Use postcss to generate the stylesheet style.css
npx postcss tailwind.css -o style.css
Use the stylesheet in your project
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Deploy the style.css on a CDN
(Possible CDN : CloudFront / Netlify)
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.
I'm currently trying to use Webpack to bundle all my files and I don't know how to proceed when dealing with multiple folders and .scss files.
I used to use grunt to do these tasks, and this is an example of my folder structure:
functions
- _mixin.scss
- _function.scss
- [...]
variables
- _colors.scss
- _typo.scss
- [...]
ui
- _button.scss
- _grid.scss
- [...]
view
- _home.scss
- _about.scss
- [...]
With Grunt I would run a task to generate a file called main.scss containing all the #import, for example:
#import 'function/_mixin.scss';
#import 'function/_function.scss';
#import 'variables/_colors.scss';
#import 'variables/_typo.scss';
[...]
Currently I'm specifying an import inside my .js file (used in conjunction with extract-text-webpack-plugin) to define the main.scss file, but each new import, or old one, needs to be added/removed manually. Is there a way to automate this task with WebPack?
When webpack 3 or 4
Use node-sass-glob-importer
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');
...
test: /\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "sass-loader",
options: {
sassOptions: {
importer: globImporter()
}
}
}
]
Use this way.
// Import all files inside the `scss` directory and subdirectories.
#import 'scss/**/*.scss';
#import 'scss/component-*';
Note - only works with webpack 2 (requires update for webpack 3^)
You could use the plugin import-glob-loader github / npm
It supports globbing with
#import "foo/**/*";
which outputs to
#import "foo/1.scss";
#import "foo/bar/2.scss";
#import "foo/bar/3.scss";