I have been working on a website and used Gulp to compile my scss files. However, the main.scss file quickly gained in the number of lines and I decided to split it in different files and then import into a single one which will be compiled to css.
here is the structure of my project (other folders, such as /js are omitted)
- css
- sass
- helpers
_variables.scss
main.scss
I use the following line to import _variables.scss in my main.scss
#import 'helpers/_variables.scss';
this is my gulp task:
gulp.task('sass',function(){
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css'))
});
When I launch the task, here what CLI outputs:
[17:13:04] Starting 'sass'...
Error in plugin 'sass'
Message:
sass\main.scss
undefined
Related
I have a file named main.scs that imported a general.scss file that has at the first line this :
#import "compass/css3";
As you can see I imported compass/css3 to use some predefined mixins.
Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.
Also I wrote these to webpack.mix.js file :
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/main/css');
But when running npm run production command I got this error:
error in ./resources/assets/sass/main.scss
Module build failed:
#import "compass/css3";
^
File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)
Even I installed compass in the project directory But there is still that problem
What do I do?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
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');
In my project i use many scss files (more than 100 files).
The file structure is similar to the BEM project.
scss/
--block/block.scss
----/__elem/block__elem.scss
--menu/menu.scss
----/__elem/menu__elem.scss
and etc...
All files compiled to css files with gulp-sass plugin and concatenated to 1 css file app.css
The same folder i have 2 scss files.
_variables.scss - for define custom variables
style.scss - main file (i use that file to import my variables).
scss/
_variables.scss
style.scss
In style.scss file contained import line with variables
#import "utilities/variables";
Yes, all variables is successful define in style.scss file, but how to define my variables for others scss files (for all scss files in folders and subfolders)?
For another files except style.scss in gulp project gives an error message:
out: error sass/menu/menu.scss (Line 5: Undefined variable: "$laptop".)
Thanks in advance.
I solved this problem. Now i just concatenate all scss file with variables and only then connect them to the general css.
Something like this:
sass/**/*.scss + _variables.scss> app.scss > app.css
I am new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
I'm using elixir to compile my scss files.
assuming that this is my folder structure:
- app.scss
- header.scss
- footer.scss
- home/
- home1.scss
- home2.scss
For one file I can use mix.sass('app.scss'); but what if for all files in my directory without need to add them one by one?
I've tried:
mix.sass('*.scss');
mix.sass('**/*.scss');
mix.sass(['*.scss']);
mix.sass(['**/*.scss']);
and the only file I can get is the public/css/app.css
How can I compile all files in order to get something like:
- app.scss
- header.scss
- footer.scss
- home/
- home1.scss
- home2.scss
I think the wildcard solution doesn't work at all.
Have you tried to import your file dependencies, with #import "file2", and only process those files?
Assuming:
home1.scss
#import "../app"
#import "../header"
#import "../footer"
// home1 css
home2.scss
#import "./home1"
// home2 css
with:
mix.sass('home1.scss');
mix.sass('home2.scss');
you'll generate only home1.css and home2.css with the dependencies style on them.
This way you'll improve your code and get a better control from dependencies.
You can provide the file globs as an array, like this:
mix.sass(['./app.scss', './home.scss'])
Or you could import just one sass file in elixir and use the sass import directive in that file to include the rest of the files.
#import 'home.scss';
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import