I have a CSS file in which I am importing other CSS files using #import. When I compile that CSS file using laravel-mix, I am unable to import the included CSS files after compilation
I have following CSScss stored in
resources/css/icheck/all.css
/* iCheck plugin skins
----------------------------------- */
#import url("minimal/_all.css");
#import url("square/_all.css");
#import url("flat/_all.css");
#import url("line/_all.css");
#import url("polaris/polaris.css");
#import url("futurico/futurico.css");
And following is my webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('resources/css/icheck/all.css', 'public/css/icheck.css')
Now when I run 'npm run dev' command it should copy the imported CSS files, but I have only the following icheck.css file in public/css folder
#import url("minimal/_all.css");
#import url("square/_all.css");
#import url("flat/_all.css");
#import url("line/_all.css");
#import url("polaris/polaris.css");
#import url("futurico/futurico.css");
Now all I want is When I compile resources/css/icheck/all.css file using laravel-mix then all the imported CSS files should be copied in public/css folder
Related
I have implemented Laravel-Mix in my application and copying files from node_module to my assets folder and than compiling my scss. Since the copying process is slow my scss is not able to find the dependent libraries.
Is there a way to delay the sass build and trigger it after copying task has completed?
Here is my webpack
let mix = require('laravel-mix');
mix.copy('node_modules/ionicons', 'resources/assets/css/libs/ionicons')
mix.sass('resources/assets/css/sass/app.scss', 'public/dist');
Below is my app.scss
#import '../libs/ionicons/dist/css/ionicons';
#import 'header';
Here is the error I am getting
95% emitting ERROR Failed to compile with 2 errors7:38:04 PM
error in ./resources/assets/css/sass/app.scss
Module build failed:
#import '../libs/ionicons/dist/css/ionicons';
^
File to import not found or unreadable: ../libs/ionicons/dist/css/ionicons.
Use tilda importer.
Webpack recognize ~ as projectRoot/node_modules
app.scss
#import '~ionicons/dist/css/ionicons.css';
#import 'header';
or much better to import sass version, to make it more flexible.
app.scss
$ionicons-font-path: '~/ionicons/dist/fonts'; //change path to ionicon font
#import '~ionicons/dist/scss/ionicons';
#import 'header';
webpack.mix.js
let mix = require('laravel-mix');
mix.sass('resources/assets/css/sass/app.scss', 'public/dist');
I am now creating html project using sass and client requested to use material.io web component. My sass is working fine. I included material.io component through node_modeules folder. But when I tried to access material-components-web.scss like below code
//style.scss file
#import 'layout';
#import 'typo';
#import 'image';
#import 'overwrite';
#import "~material-components-web";
I got this error message in style.css file.
/*
Error: File to import not found or unreadable: ~material-components-web.
Load paths:
/Users/kenvsi/www/static/mycondo/assets/sass
/Applications/Koala.app/Contents/Resources/app.nw/rubygems/gems/compass-core-1.0.1/stylesheets
Compass::SpriteImporter
on line 5 of /Users/kenvsi/www/static/mycondo/assets/sass/style.scss
1: #import 'layout';
2: #import 'typo';
3: #import 'image';
4: #import 'overwrite';
5: #import "~material-components-web";
My question is that I would like to assess all material scss components, variable and function to my custom scss file. Is there any ways to access those material scss options in html project?
i think you miss to include the scss file.
I am using this with webpack for sass compiling.
#import "~material-components-web/material-components-web";
First "material-components-web" is a folder and second is a scss file.
I would like to use the feature "Mapping network resource" to see my .scss files. So I mapped my main.css file to my main.scss.
The issue I have is that my main.scss contains only #import instructions :
// Utils
#import 'utils/colors';
#import 'utils/bootstrap-variables';
#import 'utils/functions';
#import 'utils/variables';
#import 'utils/mixins';
// Vendors
#import 'vendors/bootstap';
#import 'font-awesome';
// Base
#import 'base/reset';
#import 'base/typography';
// Components
#import 'components/state';
#import 'components/panel-dashboard';
#import 'components/modal';
So when I inspect my DOW elements, I don't see the real .scss ressources, but only the main.scss ressource.
I just recently downloaded a ready made project and it has scss files on it too. when I tried to compile main.scss file using koala-app it gives me this error.
C:\Users\1\Desktop\agency\sass\main.scss Syntax error: File to import not found or unreadable: compass/css3.
Load paths:
C:/Program Files (x86)/Koala (DEPRECATED)
C:/Users/1/Desktop/agency/sass
on line 2 of C:\Users\1\Desktop\agency\sass\partials\_base.scss
from line 4 of C:\Users\1\Desktop\agency\sass\main.scss Use --trace for backtrace.
by the way line 4 : #import "compass/css3";
I already installed:
ruby 1.9.3p545
gem 1.8.28
main.scss
// MAIN
// all modules, general styles and variables
#import "partials/base";
#import "partials/general";
// third-party
#import "vendors/supersized";
#import "vendors/font-awesome.min";
#import "vendors/brankic-icon";
#import "vendors/flexslider";
#import "vendors/animate";
#import "vendors/jpreloader";
#import "vendors/magnific-popup";
// web elements/components
#import "partials/hero-unit";
#import "partials/about";
#import "partials/services";
#import "partials/works";
#import "partials/call-to-action";
#import "partials/team";
#import "partials/testimonial";
#import "partials/contact";
#import "partials/twitter-stream";
#import "partials/footer";
_base.scss
/* ------------------ BASE STYLES ------------------ */
// import compass
#import "compass/css3";
// all variables
any suggestions would really be appreciated.. thanks ( note: newbie on sass :)
what I did was create a new sass project using ruby's command prompt "compass create newproject" then transfer the files there. then it worked.. I really did not solve the problem, thought but somehow I found a way to make it work. heres the link for reference.
I'm in the initial stages of setting up a project and wanted to structure my sass files appropriately.
This is my structure:
/css
style.scss
/partials
_colors.scss
In style.scss
#import 'partials/_colors';
body {
background-color: $mainBgColor;
}
In _colors.scss
$mainBgColor: #eee;
When I attempt save style.scss, I get error on save... check file for syntax or something to that effect.
In fact, each of these #import directives produce errors:
#import 'partials/_colors.scss';
#import '_colors.scss';
#import '_colors';
#import _colors;
What am I doing wrong?
Try removing the underline and the extension on the file name, like this:
#import "partials/support";
#import "colors";
That should do it, good luck!