I want to use sass/scss in a new project, but it somehow doesn't work.
I am using the yii2-asset-converter and when I try to convert the scss-file, the following error is thrown:
Class #app/extensions/assetparser/vendors/phamlp/sass/SassParser does not exist
I am checking the path ../phamlp/ and notice, that the Folder sass resp. SassParser.php doesn't exist.
The SassParser.php is located in the extension vendor/richthegeek/phpsass, which is required by yii2-asset-converter.
I have tried out some paths like:
# vendor/richthegeek/phpsass or
__DIR__/../../vendor/richthegeek/phpsass
But it doesn't worked .After a lot of unsuccessful attempts I hope some of you know how to solve the problem.
PS:I use the advanced app template
Don't use PhalmP or phpsass. These are outdated. You'll never get satisfactory results with them, especially when using modern Sass libraries.
Use original Sass as a standalone.
Simply install Ruby (you might already have it) and Sass and use the sass command line tool to compile.
Also, using Compass might make your life easier. Compass helps organizing your Sass code and also provides a Sass library with a lot of useful helpers.
You can use this plugin.
But you must combine your sass code in single file.
Here's example of config/web.php
'assetManager'=>[
'converter'=>[
'class'=> 'nizsheanez\assetConverter\Converter',
'force'=> true, // true : If you want convert your sass each time without time dependency
'destinationDir' => '', //at which folder of #webroot put compiled files
'parsers' => [
'scss' => [ // file extension to parse
'class' => 'nizsheanez\assetConverter\Scss',
'output' => 'css', // parsed output file type
'options' => [ // optional options
'enableCompass' => true, // default is true
'importPaths' => ['/sass','/sass/_offers'], // import paths, you may use path alias here,
// e.g., `['#path/to/dir', '#path/to/dir1', ...]`
'lineComments' => true, // if true — compiler will place line numbers in your compiled output
'outputStyle' => 'expanded', // May be `compressed`, `crunched`, `expanded` or `nested`,
// see more at http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
],
],
]
]
]
Related
I am currently working on setting up a boilerplate that uses Gatsby. Everything so far has been very simple and easy to use, but I can't seem to fix one problem, which is getting SCSS glob hooked up with my global SCSS styling.
I currently have localized SCSS styling for each component. However, I also have a styles directory for my global styles(variables, typography...ect). This is also using SCSS and is working great. Now the last thing I want to do is get SCSS glob working so I can do imports like /**/*.scss within my global styles.
Currently, I am using the gatsby-plugin-sass and have included globImporter as an option within my gatsby-config.js file. However, it does not seem to do it for me.
From what I read node-sass-glob-importer should be what I need but no luck so far.
My configuration looks like the following
{
resolve: `gatsby-plugin-sass`,
options: {
importer: globImporter(),
cssLoaderOptions: {
camelCase: false,
},
},
},
I then try to do a global import in my scss like so #import "./**/*.scss"; but I get the following error:
An #import loop has been found:
has anyone set up scss glob on gatsby or see anything wrong with my configurations.
Thanks
If you're still having this issue (or in case anyone else is), here's what worked for me:
options: {
importer: function(url, prev, done) {
// url is the path in import as is, which LibSass encountered.
// prev is the previously resolved path.
// done is an optional callback, either consume it or return value synchronously.
// this.options contains this options hash, this.callback contains the node-style callback
var result = globImporter();
return {file: result.path, contents: result.data};
}
},
It was inspired by the example code on in the node-sass repo.
Make sure to also include var globImporter = require('node-sass-glob-importer') at the top of your file.
I'm using Laravel 5.4 and Laravel Mix to output SASS files.
In my font definitions I'm configuring them so that when the CSS is output it will point to files such as public/assets/fnt/font-name/filename.ext but the processor changes the output so that it will instead point to public/fonts/filename.ext. Is there a way to stop it from changing the output paths?
It makes little sense to me that it would do something like this by default.
Edit
I've seen that the defaults they're using in Mix are the culprit:
module.exports.module = {
rules: [
// ...
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
}
]
};
I've tried using null-loader instead of file-loader but instead it causes it to fail because it can't find the files in node_modules which is not where it should be looking in the first place.
Removing the rule in question results in a flood of errors from trying to open and evaluate the font files in question:
error in ./public/assets/fnt/fanfare-jf/fanfare-jf.ttf
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap&precision=8!./resources/assets/sass/app.scss 6:2525-2590
# ./resources/assets/sass/app.scss
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
I can at least add emitFiles: false to options to prevent it from making copies of the file, but the paths are still being altered.
I ended up with the following configuration to at least get it to a working state.
let assetDir = 'assets/build';
mix.config.fileLoaderDirs.fonts = `${assetDir}/${mix.config.fileLoaderDirs.fonts}`;
mix.config.fileLoaderDirs.images = `${assetDir}/${mix.config.fileLoaderDirs.images}`;
mix.sass('resources/sass/app.scss', `public/${assetDir}/css`)
.js('resources/js/app.js', `public/${assetDir}/js`);
Updated:
In newer versions this has been made customizable via mix.options() and can be adjusted as below:
let assetDir = 'assets/build';
mix.options({
fileLoaderDirs: {
images: `${assetDir}/img`,
fonts: `${assetDir}/fonts`
}
});
// adjust build commands accordingly, for example:
mix.js('resources/js/app.js', `public/${assetDir}/js`);
The output you got is the intended behaviour due to your configuration.
You are using this configuration to load the file:
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
Which says use the publicPath as public and create a file with the name fonts/[name].[ext]?[hash] and webpack knows about what these symbols '/', '.', '?' in the name do.
It just looks for the fonts directory and if there is no any fonts directory it creates a new one and place the files into that directory.
So, you need to use this configuration for your folder structure:
options: {
name: 'assets/fnt/font-name/[name].[ext]?[hash]',
publicPath: '/'
}
This should work for your configuration.
More on file-loader configuration:
https://github.com/webpack-contrib/file-loader#filename-templates
Edit:
Since Laravel Mix uses Webpack in it's background and Webpack doesn't have any knowledge of the fonts file when there is no any appropriate loader added to the configuration. So, the error:
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
is occurred.
You need to tell the Webpack to load the fonts to your desired directory and the fonts linked in your SASS file will be linked by the Webpack without any more configurations.
How can I compile a SASS file and have it output all the final values of every variable in a json file
I asked a similar question before and someone on here thought I was trying to get you guys to do my job. I'm just trying to see if it's possible at all before I go down a path that ultimately is a waste of time. If it is possible, I don't know the magic sauce to get started.
I have CMS themes that are built on bootstrap-sass, and other sass frameworks, and I'd like my CMS to be able to access variables that we use in the SASS files as well. Seems to me that if when I compiled the SAAS file, I got a CSS, MAP, and JSON file, I'd be all set.
I could write this as some kind of mixin, but even then, I'd need to be able to get
A list of all variables
a command to output json to the dist folder.
Any pointers on these items are appreciated.
If you're using Gulp to compile your SASS there is a plugin that accomplishes this.
https://www.npmjs.com/package/gulp-sass-json
After installing it, and given the following Gulpfile.js:
var sassJson = require('gulp-sass-json');
var paths = {
'json_root' : './bundles/theme/scss/variables/*.scss',
'json_dest' : './json'
};
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('sass-json', function () {
return gulp
.src(paths.json_root)
.pipe(sassJson())
.pipe(gulp.dest(paths.json_dest));
});
gulp.task('default', ['sass-json']);
Given the SCSS file variables/colors.scss:
$red: #ed1414;
$blue: #0351e0;
$green: #259208;
Outputs the following json at ./json/colors.json
{
"red": "#ed1414",
"blue": "#0351e0",
"green": "#259208"
}
So in order to have it re-output it every time you compile, you can just create a task that encompasses this task as well as your normal style compile task.
I have a little ruby script that uses Compass to compile *.scss files, since Compass and Sass are ruby-based I am just using the compiler directly like this (based on this SO question):
require 'compass'
require 'sass'
Compass.add_configuration({
:project_path => '.',
:sass_path => 'css',
:css_path => 'css',
:output_style => :compressed
},'custom')
Compass.compiler.compile('css/index.scss', 'css/index.css')
That works as expected and does the compilation, BUT, I also get this message:
Compass.compiler is deprecated. Use Compass.sass_compiler instead.
So I tried to use:
Compass.sass_compiler.compile('css/index.scss', 'test.css')
What throws an Error, telling that the class SassCompiler (NoMethodError) is not defined.
I really would like to use the suggested method, but can I use it and what do I have to require in ahead?
Thanks for help!
After digging a bit into the source, I finally found it!
require 'compass/sass_compiler'
is the missing line!
The final line to run the compilation looks like that:
Compass.sass_compiler.compile!
Thats it.
Btw.: the Compass.sass_compiler method accepts some options (source) which are handed over to the compiler, but using Compass.add_configuration as above does the same Job.
I hope somebody can use this Information, happy compiling!
EDIT
Due to the comments here the complete code that works for my project. It is included in a build script, the following lines are from the initialisation:
require 'compass'
require 'compass/sass_compiler'
Compass.add_configuration({
:project_path => _(),
:output_style => :expanded,
:cache_path => '<path to cache>',
:http_fonts_path => '../fonts',
:fonts_dir => '<relative path to fonts>',
:sass_path => '<path to the scss files>',
:css_path => '<path fot the compiled css>',
:http_images_path => '../img',
:images_path => '<path to images>'
},'custom-name')
And these line run in each compilation:
compiler = Compass.sass_compiler({
:only_sass_files => [
'<path to scss file to compile>'
]})
compiler.compile!
To get an overview of all possible options I recommend a look at the source and at the official documentation of sass and compass.
I'd like to get the SubLime Linter plugin (https://github.com/Kronuz/SublimeLinter) to recognize Ruby 1.9 syntax. Has anybody been able to get this to work in SublimeText 2?
Here is my current default settings file:
/*
SublimeLinter default settings
*/
{
/*
Sets the mode in which SublimeLinter runs:
true - Linting occurs in the background as you type (the default).
false - Linting only occurs when you initiate it.
"load-save" - Linting occurs only when a file is loaded and saved.
*/
"sublimelinter": true,
/*
Maps linters to executables for non-built in linters. If the executable
is not in the default system path, or on posix systems in /usr/local/bin
or ~/bin, then you must specify the full path to the executable.
Linter names should be lowercase.
This is the effective default map; your mappings may override these.
"sublimelinter_executable_map":
{
"perl": "perl",
"php": "php",
"ruby": "ruby"
},
*/
"sublimelinter_executable_map":
{
},
/*
Maps syntax names to linters. This allows variations on a syntax
(for example "Python (Django)") to be linted. The key is
the base filename of the .tmLanguage syntax files, and the value
is the linter name (lowercase) the syntax maps to.
*/
"sublimelinter_syntax_map":
{
"Python Django": "python"
},
// An array of linter names to disable. Names should be lowercase.
"sublimelinter_disable":
[
],
/*
The minimum delay in seconds (fractional seconds are okay) before
a linter is run when the "sublimelinter" setting is true. This allows
you to have background linting active, but defer the actual linting
until you are idle. When this value is greater than the built in linting delay,
errors are erased when the file is modified, since the assumption is
you don't want to see errors while you type.
*/
"sublimelinter_delay": 0,
// If true, lines with errors or warnings will be filled in with the outline color.
"sublimelinter_fill_outlines": false,
// If true, lines with errors or warnings will have a gutter mark.
"sublimelinter_gutter_marks": false,
// If true, the find next/previous error commands will wrap.
"sublimelinter_wrap_find": true,
// If true, when the file is saved any errors will appear in a popup list
"sublimelinter_popup_errors_on_save": false,
// jshint: options for linting JavaScript. See http://jshint.com/#docs for more info.
// By deault, eval is allowed.
"jshint_options":
{
"evil": true,
"regexdash": true,
"browser": true,
"wsh": true,
"trailing": true,
"sub": true,
"strict": false
},
// A list of pep8 error numbers to ignore. By default "line too long" errors are ignored.
// The list of error codes is in this file: https://github.com/jcrocholl/pep8/blob/master/pep8.py.
// Search for "Ennn:", where nnn is a 3-digit number.
"pep8_ignore":
[
"E501"
],
/*
If you use SublimeLinter for pyflakes checks, you can ignore some of the "undefined name xxx"
errors (comes in handy if you work with post-processors, globals/builtins available only at runtime, etc.).
You can control what names will be ignored with the user setting "pyflakes_ignore".
Example:
"pyflakes_ignore":
[
"some_custom_builtin_o_mine",
"A_GLOBAL_CONSTANT"
],
*/
"pyflakes_ignore":
[
],
/*
Ordinarily pyflakes will issue a warning when 'from foo import *' is used,
but it is ignored since the warning is not that helpful. If you want to see this warning,
set this option to false.
*/
"pyflakes_ignore_import_*": true,
// Objective-J: if true, non-ascii characters are flagged as an error.
"sublimelinter_objj_check_ascii": false
}
I was able to get it to work using the absolute path to my ruby 1.9 executable. I’m using rbenv, so to get the path I ran rbenv which ruby, you might need to put in /usr/local/bin/ruby or /usr/local/bin/ruby19.
This is how my sublimelinter default setting looks like (you can put this into a project-specific file too if you prefer:)
Preferences -> Package Settings -> SublimeLinter -> Settings - User
"sublimelinter_executable_map":
{
"ruby": "~/.rbenv/versions/1.9.3-p0/bin/ruby"
},
when using rvm you should be able to use rvm-auto-ruby for it.
there was an issue with this, but i think it's solved right now: https://github.com/SublimeLinter/SublimeLinter/issues/30
All, just wanted to chime in because I was having this issue, too and the following works on ST2 v 2.0.1 on Ubuntu in the User/SublimeLinter.sublime-settings file which is found at
Preferences -> Package Settings -> SublimeLinter -> Settings - User
{
"sublimelinter_executable_map": {
"ruby": "~/.rvm/bin/rvm-auto-ruby"
}
}
After adding, restart ST2, go to the console and check that it has updated by running the following:
view.settings().get("sublimelinter_executable_map")
You should get the following output:
{'ruby': u'~/.rvm/bin/rvm-auto-ruby'}
I was also able to get this to work by adding the PATH and point ruby to the rbenv shim to the sublimelinter_executable_map (I think this is recommended way from the official documentation too.) This also enables you to switch ruby versions without having to update the config too.
{
"sublimelinter_executable_map": {
"path": "/usr/local/var/rbenv/shims:/Users/luke/bin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/X11/bin",
"ruby": "/usr/local/var/rbenv/shims/ruby"
}
}
In SublimeLinter 3, rbenv (and hopefully rvm) is supported out of the box with no extra config (other than making sure they are initialized in the right place in your shell startup).