There's my project with the folowing structire:
project
assets
scripts
styles
app.scss
bower_components
node_modules
public
css
app.css
js
bower.json
gulpfile.js
package.json
I use gulp-sass to compile app.scss to app.css and i want to include foundation in app.scss
gulp.task('styles', function() {
return gulp.src(path.src.styles)
.pipe(sass({
includePaths: ['./bower_components/foundation/scss']
}))
.pipe(concat('app.css'))
.pipe(gulp.dest(path.public.styles));
})
Then I white in app.scss file:
#import 'foundation/_settings';
#import 'foundation';
And when i run gulp, I get:
Error: assets\styles\app.scss
undefined:undefined Invalid UTF-8
What's wrong?
I think you have a UNIX unsupported letter in your folder path ? Try removing it.
I removed this error by removing the letter "ä" from the folder name.
set file encoding to UTF-8 in your IDE, it is probably something else by default and sass is interprets it as UTF-8
I just had to rename windows user name, because it contained UNIX unsupported characters.
But because it was too difficult to rename the folder of user, I just moved my project.
Try to replace on package.json of gulp-sass, instead of
"node-sass": "^3.4.2"
with
"node-sass": "^3.5.0-beta.1"
This worked for me!
Related
I am setup the project of the vuejs on of the my goals in the end of the project is to compile files scss which is the main file with name style.scss- from input to output in the file main file style.css to Load in the vuejs.
Also all files .scss should include with #importfor examples: #import "variables";and so on
in the main file style.scss.
I read about it.enter link description here
My project is as in the picture below.
Any idea how to sole it?
Thanks.
My dear friend, if I have understood your meaning correctly, I would like to try to offer you some solutions.
In order to use SCSS in a project and compile it automatically in the background, we can do the following steps:
1. Install node-sass
To get the compiler, we’re going to install the node-sass package.
Go to your terminal, navigate to the project folder and type in the following:
npm i node-sass
2. Create an SCSS folder
Create a new folder called scss in your project. After doing so, copy and paste all the CSS files from your css (or stylesheets) folder to your new scss folder.
Rename the extensions on all the newly pasted css files with .scss
You should end up with a scss folder which looks exactly like your css folder but with the files ending with .scss.
3. Add a script in package.json
In your package.json file, locate scripts and add the following piece of code inside it:
"scss": "node-sass --watch scss -o css"
If your css folder is named something other than css, then replace the word css with the folder name.
Similarly, if your scss folder is named something other scss, then replace scss with the correct folder name.
Setting context in the overall package.json file, the script will be placed like this:
{
“name”: “example-project”,
“version”: “0.4.2”,
“scripts”: {
“start”: “node ./bin/www”,
“scss”: “node-sass — watch scss -o css”
},
"dependencies": {
"express": "~4.16.0",
"express-favicon": "^2.0.1",
}
}
4. Run the compiler
Get back into terminal and run the following commandL
npm run scss
Now you’ll notice any changes you make in your scss files will automatically be reflected in the css files.
if you have any new idea about Compile SASS to CSS you can check another steps with this link.
I am trying to set the save location of my css file to its own css folder in the Live Sass Compile Config (Live Sass Compile > Settings:Formats)
I have tried setting the savePath to "/css" - After this - I tried saving my main.scss file, which is supposed to generate a css folder with a main.css file in it. However, it is just generating a main.css file in the same folder as my main.scss (which is in a scss folder).
I have tried uninstalling and reinstalling VSC but my previous settings were saved.
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
"window.zoomLevel": 0,
"editor.tabSize": 2,
"editor.wordWrap": "off"
}
The code above is all that shows in my .json file. The top 3 lines are greyed/blacked out (format to save path).
This display in my .json file is way different than what I'm finding in tutorials on this.
I strongly suggest you to avoid using that for sass.
Use node-sass instead. It's super easy to setup and run!
Just install it from command line:
npm i node-sass -g
And run it in the background:
node-sass [entry path-to-file] [output-path-to-file] -w
The -w watches for changes in your .sass or .scss file and compiles straight away!
In your settings.json rename the path form "\css" to "\\css"
Like this:
{
"format": "expanded",
"extensionName": ".css",
"savePath": "\\css"
}
Don't worry it's how VS Code understands file paths. Not your fault:)
Refresh the main css file for every change in your child scss files (ctrl+s)
Make sure you renamed your sass main file style.scss.
If your sass main file have underscore before name like _style.scss, your live sass compiler will not generate .css file.
So rename your main sass file from _style.scss to style.scss.
I'm currently discovering modules with npm, and I went to use bootstrap-sass. Now that the modules were downloaded, I was looking for a solution to compile scss into the static folder of the application, and also the js bootstrap files.
But according to npmjs documentation of the modules, I can't found a simple solution which is not to move the js files myself and compile the scss bootstrap files from node_modules with something like node-sass.
What is the simplest way to use this module correctly and with the possibility to custom ?
Edit :
For now, I am using the following scripts/files :
"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"
app.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
main.js
global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');
I've never used bootstrap-sass before, but the documentation implies that a build tool to preprocess the SCSS is a prerequisite for using this module. While it's no longer the shiniest tool in the shed, Gulp is very capable of handling this task as well as moving the files from node_modules to your project root directory for you.
Here's a breakdown of one approach to implement this:
Create three subfolders in your project root directory and call them sass, css and javascript.
Create a file in the sass folder and call it app.scss. Open it and paste this: #import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';. When the file is converted into CSS, all of the Bootstrap modules will be there. Beneath the #import statement on line 1, feel free to write whatever style rules you want.
Assuming you have already run npm init and have a package.json file in your project directory, run npm install gulp -D in your terminal. This installs gulp (my task runner of choice!).
Run npm install gulp-sass --save-dev. This installs the gulp plugin that will preprocess the Bootstrap SASS into CSS.
Create a file in your root directory (not in any of the subfolders) called gulpfile.js
Copy and paste this text into gulpfile.js:
(note: for this to work, your SASS and CSS folders must be called sass and css, respectively, unless you change their names in the following code.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Lastly, run the command gulp in your terminal to execute the gulpfile, which will do two things:
Preprocess and move all of the SASS into your css folder.
Copy bootstrap.min.js from node_modules into your project's javascript folder.
Of course, don't forget to link to these assets in your HTML.
I whipped up this gulpfile on the fly and it works on my machine, but if you decide to try this approach then feel free to ask if something throws an error. Best of luck on your project.
I've been looking for many hours at how to use SCSS in the Underscore theme that I downloaded with _sassify.
When I open the folder and I see the style.css and the folder with scss files, the theme use css but I want change and use the scss file.
I don't understand how to use it.
What is the process to use scss? Can someone help me with this?
Thanks
You have to use a preprocessor to compile scss to css. The theme uses css, this will not change. You do your changes in scss - then scss compiles to css. A preprocessor can be part of your IDE, you can use programs like Koala, Scout, Prepros or you use the sass command line.
You should start reading here:
http://sass-lang.com
Try compiling your first .scss files in a test directory with help of http://sass-lang.com/guide:
sass input.scss output.css
Then start tweaking _s.
I spent a few days how to change styles in Underscore Theme with scss files to css file. Earlier I worked with Gulp so I wanted to create gulpfile that will work. I created normal file with Gulp which at first didn't work - it worked in cmd, but on Wordpress nothing changed. But after adding a plugin WP-SCSS finally it works! So thanks a lot for your answer Jonathan and for helping me to find this plugin. Maybe it will help someone, so below I add the code from the gulpfile.
// gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
sourcemaps = require("gulp-sourcemaps");
function style() {
return (
gulp
.src(paths.source.src)
.pipe(sourcemaps.init())
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.source.dest))
);
}
// $ gulp style
exports.style = style;
var paths = {
source: {
// By using styles/**/*.sass we're telling gulp to check all folders for any sass file
src: "sass/**/*.scss",
// Compiled files will end up in whichever folder it's found in (partials are not compiled)
dest: "."
}
};
function watch() {
gulp.watch("sass/**/*.scss", style);
}
// $ gulp watch
exports.watch = watch
You need to follow the steps from this page https://github.com/Automattic/_s
Setup
To start using all the tools that come with _s you need to install the necessary Node.js and Composer dependencies :
$ composer install
$ npm install
Available CLI commands
_s comes packed with CLI commands tailored for WordPress theme development :
composer lint:wpcs : checks all PHP files against PHP Coding Standards.
composer lint:php : checks all PHP files for syntax errors.
composer make-pot : generates a .pot file in the languages/ directory.
npm run compile:css : compiles SASS files to css.
npm run compile:rtl : generates an RTL stylesheet.
npm run watch : watches all SASS files and recompiles them to css when they change.
npm run lint:scss : checks all SASS files against CSS Coding Standards.
npm run lint:js : checks all JavaScript files against JavaScript Coding Standards.
npm run bundle : generates a .zip archive for distribution, excluding development and system files.
I'm not sure about the Underscore theme specifically, but I have used this plugin in the past and I really like it. It lets you use SCSS with any theme and automatically compiles the files for you.
I've inherited a project that uses Sass. I'm a 'NET developer so compiling CSS isn't really something ive had much exposure to. The previous developer told me (as I run on Windows and he runs on a MAC) to install prepros.
The steps I have run through are:
Installed Ruby 2.3.0 for Windows
Installed sass "gem istall sass"
Installed compass "gem install compass"
Installed sass-globbing "gem install sass-globbing"
Installed compass-install-once "gem install compass-install-once"
I then opened Prepros and dragged in my "static folder", which has a structure like so:
Static
css
js
sass
components (multiple files in this directory)
components.sass
screen.sass
screen.css looks like:
#import compass/reset
#import lubalin.css
#import variables
#import typography
#import main
#import components
#import elements
#import shop
#import blog
#import sponsor
#import theme
And the content of the screen.sass files looks like so:
#import "components/*"
In PrePros I changed the compiler to use Ruby Sass instead of Node Sass (on the advice of the previous developer).
Now, when I click on screen.sass in PrePros and click "Process file" I get the error message "Error: It's not clear wghich file to import for '#import "components/*"'.
I found some threads online that suggested that this was due to Windows, and that the wildcard should be changed to #import "components/.", however when I run with this command the error i get is "Error: File to import not found or unreadable: components/."
Strangely, the file that prepros creates i.e. seems to understand perfectly which files to import for components.sass because I can see in the file the following section:
{
"path": "sass/components.sass",
"imports": [
"sass/components/_address.sass",
"sass/components/_buttons.sass",
"sass/components/_checkboxes.sass",
"sass/components/_cookies.sass",
"sass/components/_emailSignup.sass",
"sass/components/_forms.sass",
"sass/components/_moreContent.sass",
"sass/components/_postCode.sass",
"sass/components/_rte.sass",
"sass/components/_search.sass",
"sass/components/_separator.sass",
"sass/components/_tooltip.sass",
"sass/components/accordion.sass",
"sass/components/equalHeight.sass",
"sass/components/grid.sass",
"sass/components/modal.sass",
"sass/components/svgImages.sass",
"sass/components/table.sass",
"sass/components/_checkboxes.sass"
]
},
So it seems strange that PrePros can tell which files to import, yet when I try to compile it doesn't understand!
Lastly, the contents of the compass (config.rb) is:
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
Can anyone help a Sass newbie that;s out of their depth get PrePros up and running!? What am I doing wrong?
Thanks for your time in advance
dotdev
In my opinion, if you are a NET Developer you don't need PrePros, because you have Visual Studio good plugin-compilers. Try WebEssentials, it will do all the work for you. WebEssentials compiles SASS/SCSS files automatically when you save it.