I'm trying to use bulma in my project. But I get an error:
{ Error: resources/assets/sass/app.scss
Error: File to import not found or unreadable: bulma
Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss
on line 1 of resources/assets/sass/app.scss
>> #import "bulma"
^
at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)
status: 1,
file: '/Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
line: 1,
column: 1,
message: 'resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
formatted: 'Error: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageFormatted: '\u001b[4mresources/assets/sass/app.scss\u001b[24m\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n',
messageOriginal: 'File to import not found or unreadable: bulma\nParent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss',
relativePath: 'resources/assets/sass/app.scss',
name: 'Error',
stack: 'Error: resources/assets/sass/app.scss\nError: File to import not found or unreadable: bulma\n Parent style sheet: /Users/Janssen/Code/forumv2/resources/assets/sass/app.scss\n on line 1 of resources/assets/sass/app.scss\n>> #import "bulma"\n ^\n\n at options.error (/Users/Janssen/Code/forumv2/node_modules/node-sass/lib/index.js:283:26)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
MacBook-Pro-van-Jamie:forumv2 Janssen$
This is how my Gulp file looks like:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix.webpack('app.js')
.styles([
'./node_modules/normalize-css/normalize.css',
'./node_modules/nprogress/nprogress.css',
'./node_modules/sweetalert/dist/sweetalert.css',
'./node_modules/bulma/css/bulma.css'
])
.sass('app.scss');
});
When I try to import it in my app.scss like this:
#import "bulma"
I receive the above error. What could be wrong?
bulma.scss file needs to be present in the resources/assets/sass directory to import if you are importing from npm package then define the full path like
#import 'node_modules/pathtobulma.scss/bulma';
Try to include them in you main sass file rather in the gulp file . I think that will do the trick.
Try changing const elixir = require('laravel-elixir'); to var elixir = require('laravel-elixir'); This helped me.
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 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";
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.
I'm having trouble importing Bourbon into my scss using npm. I've installed both Sass and Bourbon using npm.
my import reads like this:
#import "../../node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/bourbon";
and this is the my gulp task for scss files:
gulp.task('build-css', function () {
return gulp.src(assetsDev + 'scss/*.scss')
.pipe(sourcemaps.init())
.pipe(postcss([precss, autoprefixer, cssnano]))
.pipe(sourcemaps.write())
.pipe(ext_replace('.css'))
.pipe(gulp.dest(assetsProd + 'css/'));
});
after saving the import path for the first time, this is the error I get:
events.js:141
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, open '/Users/yosemetie/Documents/github/udemey-ng2/directives-part1/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/_bourbon.css'
at Error (native)
One other thing to note is that when I comment out a class like this in my scss file:
//h1{
// color: #4c4c4c;
//}
gulp throws an error -
/app.scss:10:1: Unknown word
// color: #4c4c4c;
//}
however if I write it like this:
h1{
//color: #4c4c4c;
}
No error gets thrown.
Any help would be greatly appreciated!
Thanks in advance - still new to gulp here.