I want to add SASS to my project, I'm using Symfony 4.2.1 / Ubuntu 16.04
Here is the commands I've use:
composer require encore
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
yarn install
So I have a webpack.config.js file the Documentation say:
// webpack.config.js
// ...
Encore
// ...
// enable just the one you want
// processes files ending in .scss or .sass
.enableSassLoader()
// processes files ending in .less
.enableLessLoader()
// processes files ending in .styl
.enableStylusLoader()
;
There is a Encore object.
In another tutorial I see:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
It totally different type file the documentation say (the first code)
And my file look as:
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you require will output into a single css file (app.css in this case)
require('../css/app.css');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
// const $ = require('jquery');
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
It is another different type of file again!
What must I do now ? (I've made nothing after 'yarn install')
Your first webpack.config file has been setup to use Encore, a Symfony component that wraps webpack to provide an easy to use API.
The second webpack.config file is not using Encore, it is a traditional webpack setup.
Since you are using the latest version of Symfony you probably want to use the first, which provides a much easier to understand API.
You can read more about Encore in the symfony docs here:
https://symfony.com/doc/current/frontend/encore/css-preprocessors.html
Related
I read symfony documentation for Web Assets and create /assets directory in root of my project then run command php bin/console assets:install but get:
[OK] No assets were provided by any bundle.
I store one CSS file in assets directory but didn't install in /public
how should I do?
The web assets documentation for Symfony 4 recommends using Webpack Encore.
The assets:install command is not used in this configuration.
Here's what you have to do according to the documentation :
Install Node.js and Yarn on your computer.
Install Encore into your project with : yarn add #symfony/webpack-encore --dev
Configure webpack / Encore by editing (or creating) the webpack.config.js file as described here.
Compile your assets by running : yarn run encore dev
There is a workaround to do it clearly (more or less) while we are waiting for further webpack-encore development. Can be done by Makefile or similar way but here is more native solution.
Create blank bundle:
// src/BlankBundle/BlankBundle.php
namespace App\BlankBundle;
use Symfony\Component\HttpKernel\Bundle\Bundle;
class BlankBundle extends Bundle
{
}
Then put your assets to src/BlankBundle/Resources/public directory and enable the bundle:
// add it to config/bundles.php
App\BlankBundle\BlankBundle::class => ['all' => true],
After executing php bin/console assets:install command your resources will be at public/bundles/blank directory.
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'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
I'm hoping to start using SASS in a Visual Studio 2010 project using Web Workbench - but the issue of version control through TFS has me stumped. To avoid overriding someone else's changes I understand that the outputted CSS should be excluded from source control, and that the SCSS should be compiled to CSS server side during the build process. Currently we use a Powershell script for the build, but I can't seem to find any information on how to incorporate SCSS compilation in Powershell. Is there any decent documentation out there on this process?
I think my lack of experience with Powershell/build scripts in general had me overthinking this. I took the following steps:
1) Installed Ruby for Windows from here: https://www.ruby-lang.org/en/documentation/installation/
2) Open Command Prompt -> entered gem install ruby
3) Opened PowerGUI Script Editor (already installed, but can be downloaded here: http://software.dell.com/products/powergui-freeware/)
4) Created a function to execute the following: sass -t compressed "path\sassInput.scss" "path\sassOutput.css"
And presto. I do want to have a way of doing this for each .scss file in the directory that is not a partial, but this is enough to get me started for now.
UPDATE:
This is what I ended up with for a Powershell script: (note $dirpath is set to my project's root directory elsewhere)
$stylesheetPath = $dirpath + "App_Themes\"
$files = Get-ChildItem $stylesheetPath -Filter *.scss
for ($i=0; $i -lt $files.Count; $i++) {
$file = $files[$i]
$fileName = $file.BaseName
$filePath = $file.FullName
if (-not $fileName.StartsWith("_")) {
$newFilePath = "$stylesheetPath$fileName.css"
sass -t compressed $filePath $newFilePath
}
}
You need a SASS compiler and your mileage may vary. The original compiler is written in Ruby, so, if you want to use that, you have to install Ruby, the SASS gem and invoke sass from your Powershell script.
Another option is to use a compatible compiler like SassC or C6 which do not need the Ruby runtime.
I had the same problem. U have this one because powershell have restricted executable policy. U can do next:
0. Install node.js, npm, node-sass
Run PowerShell as Administrator
Chech policy with Get-ExecutionPolicy
U will see Restricted
See all policies Get-ExecutionPolicy -List
Run Set-ExecutionPolicy -ExecutionPolicy Unrestricted
Press "Y"
Use node-sass -w ./input.scss ./output.css
Also, U can read more here
Install Node.JS (https://nodejs.org/download/)
Install Ruby for Windows (http://rubyinstaller.org/)
run npm init in your project directory to create a packages.json file.
install grunt npm install grunt --save-dev (http://gruntjs.com/getting-started)
install grunt-contrib-sass npm install grunt-contrib-sass --save-dev
create an empty Gruntfile.js in your project root
add the following to your gruntfile.js
module.exports = function(grunt) {
// Do grunt-related things in here
};
follow instructions here to create a grunt-sass task: https://github.com/gruntjs/grunt-contrib-sass
Some simple examples are provided near the end of the readme.
run grunt from a powershell window in you project root.
PROFIT!
this snippet might help when adding this to your automated build script:
push-location c:\dev\project
grunt
pop-location
I have installed node.js/stylus/nib on my mac and I can manually compile .styl file to .css on the command line. I also know there is this stylus.middleware() things that keeps coming up when I search for how to setup auto-compiling when the .styl changes, however I have no idea how I am supposed to implement it (I have never used node.js before).
What file do I put that code in?
How do I start this code so it is always run?
I think I am missing a few things on the node side to be able to set this up.
From the command line you can use:
stylus -w folder/
or just for another example:
stylus -w styl/*.styl -o css/
It will watch for changes and compile all *.styl files that live under that folder.
If you installed stylus as a global package (npm install stylus -g) you have a stylus binary on your system.
$ stylus -h
Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help [<type>:]<prop> Opens help info at MDC for <prop> in
your default browser. Optionally
searches other resources of <type>:
safari opera w3c ms caniuse quirksmode
Options:
-i, --interactive Start interactive REPL
-u, --use <path> Utilize the stylus plugin at <path>
-U, --inline Utilize image inlining via data uri support
-w, --watch Watch file(s) for changes and re-compile
-o, --out <dir> Output to <dir> when passing files
-C, --css <src> [dest] Convert css input to stylus
-I, --include <path> Add <path> to lookup paths
-c, --compress Compress css output
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, --line-numbers Emits comments in the generated css
indicating the corresponding stylus line
--include-css Include regular css on #import
-V, --version Display the version of stylus
-h, --help Display help information
This briefly covers some Node basics.
0. Organizing code. It is a convention to put your main Node application code into a file called app.js in the project root.
Inside app.js things are grouped into two general parts:
synchronous initializations: require modules, build directories, read configs, db connections, etc. Things that block, so they must exist or die quickly.
asynchronous app tasks: start server, background processes, auto-compile CSS & JS, routing, i/o, etc. Things that are in the event loop.
1. Compile Stylus to CSS when you build the app. We need to require the stylus module. Usually this is done at the top of the app.js to keep dependencies together.
var stylus = require('stylus');
The first time that Node runs app.js, you need this JS module to build your CSS. This is the basic idea:
stylus.render(stylus-code-string, function(err, css) {
if (err) throw err;
console.log(css);
});
Here is the official Stylus Javascript API.
To use the power of Node, you should read a stylus file using fs module into a buffer, then convert it to a string, and finally pass it into stylus.render(). Then, send the result into a destination file. Since this is part of the build process, it can be synchronous. But this is not really your question...
2. Auto-compile CSS with Stylus as a background process.
This function spawns a child_process that watches a single .styl file and compiles the included .styl files into a .css file. You do not need a module for this, only install the stylus executable so that it runs on the command line. (You have already done this). This example was made with stylus version 0.5.0. Also, the folder paths that you use (ex. build/styles and styles) need to exist.
function watchStyles(sourcefile, destinationfolder) {
var Stylus = child_process.spawn('stylus', ['--sourcemap', '-w', sourcefile, '--out', destinationfolder]);
Stylus.stdout.pipe(process.stdout); // notifications: watching, compiled, generated.
Stylus.stderr.pipe(process.stdout); // warnings: ParseError.
Stylus.on('error', function(err) {
console.log("Stylus process("+Stylus.pid+") error: "+err);
console.log(err);
});
// Report unclean exit.
Stylus.on('close', function (code) {
if (code !== 0) {
console.log("Stylus process("+Stylus.pid+") exited with code " + code);
}
});
}
Next, you need to call this function sometime after you start your app. Pass in your master .styl file as the source. Then the destination directory where you want your CSS to go.
// check that you passed '-w' parameter
if (process.argv[2] && (process.argv[2] == "-w")) {
watchStyles('styles/app.styl', 'build/styles');
}
Start the app by running:
$ node app.js -w
It helps to organize your .styl files under one app.styl so that the contents of your app.styl looks like this:
#import 'layout'
#import 'header'
#import 'main'
#import 'footer'
#import 'modal'
#import 'overrides'
** I end up here yesterday and didn't find the right answer. So this follow up is for anyone else who follows the same path as me... **
I had a problem setting stylus command line up too. I kept trying to install stylus globally
$ npm install -g stylus
and would get errors. I had it working in one project with grunt-contrib-stylus but via command line I wasn't getting anything to work.
Even $stylus --version didn't return anything. I tried to update npm and it broke npm, so I ended up reinstalling node to reinstall npm. Then I was able to do a fresh install of $ sudo npm install -g stylus and could get the --version.
I also had to reinstall grunt and everything else I had installed globally via npm...
First, install stylus locally npm install stylus --save-dev if you haven't.
Create a startup script that builds your stylesheet and rebuilds whenever change detected in your main stylus file:
startup.js
var fs = require('fs')
var stylus = require('stylus')
// Define input filename and output filename
var styleInput = __dirname + '/dev/stylus/main.styl'
var styleOutputFilename = 'main.css'
var styleOutput = __dirname + '/static/' + styleOutputFilename
var stylusPaths = [__dirname + '/dev/stylus', __dirname + '/dev/stylus/libs']
// Build stylesheet on first execute
buildStyles(styleInput, styleOutput, stylusPaths)
// Watch stylus file for changes.
fs.watch(styleInput, function(eventType, filename) {
if (filename) {
buildStyles(styleInput, styleOutput, stylusPaths)
} else {
console.log('no filename found. probably platform doesnt support it.');
}
});
function buildStyles(input, output, paths) {
stylus(fs.readFileSync(input, 'utf-8'))
.set('paths', paths)
.set('include css', true)
.set('watch', true)
.render(function(err, css) {
if (err) throw err;
fs.writeFile(output, css, (err) => {
if (err) throw err;
console.log('👍 Stylesheet built successfully.');
});
});
}
Type node startup.js in the terminal. You will see a message "Stylesheet built successfully." whenever you change your main stylus file.
There is good documentation about stylus javascript api in their website.
OK I edited my answer because you do not want to make a homepage and then connect-assets makes no sense and can not help you... but maybe this,...
http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language
on that site you find at the bottom a video which shows close to the end how to use stylus via command line...
HTH and sorry for the misunderstanding...