I am trying to configure SASS/SCSS Autoprefixer in phpstorm and no solution here or anywhere on google is working for me, any help is appreciated...
I have tried many options including making a custom file watcher and using postcss-cli autoprefixer, but not able to get it right.
As it's written in this comment, there is no built-in support for autoprefixer, and it can hardly be expected in near future. If you miss it, please vote for WEB-37.
You can install the autoprefixer (npm install postcss-cli autoprefixer -g) and set it up as a file watcher, for example
You can also try using sass-prefix-mixins in your code
Related
I've tried to write SCSS in my Maven project with React in IDEA. I have sass and sass-loader in npm packages. But I always get a weird error:
Syntax error: missing semicolon
This is a very simple scss example for test. I can't use other tag selectors as well. I've added scss variable on the top to see if it causes an error but it doesn't and all the errors stop at tags. I think that means that scss file is readable after all. And everything is ok when using just css. What's going on?
I solved the problem. Maybe someday it would be useful for somebody.
The point is I missed restarting webpack when changing it. I found configs for sass-loader on its npm page and added it to my webpack.config.js and then run webpack --watch --progress. Everything finally worked
I am having some issue, its killing me. please help.
I am trying to run npm in DEV using command: npm run dev
In my webconfig.mix.js : mix.sass('resources/assets/sass/style.scss', 'public/css');
95% emitting
ERROR Failed to compile with 4 errors 05:33:52
This dependency was not found:
* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/Code/pudatalk/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/style.scss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false,"importLoaders":1}!../../../node_modules/postcss-loader/lib/index.js??postcss!bootstrap/dist/bootstrap.css
Please see the error above.
So, i found out that its happening when i import :
#import "~bourbon/app/assets/stylesheets/_bourbon.scss";
and i implemented something like :
.error-bg-img {
background:url("../img/errorbg.jpg");
background-size:cover;
}
I am trying to tell you what i had in the code that occur the problem.
I have been trying google it, reinstall so many things, move things around but hopeless. I am a newbie in sass, webpack, and laravel-mix.
Thanks so much
Alright guys,
I fixed the problem, i didn't now that webpack will automaticly copy the image in /img folder to /public. So i moved my /img from public/ folder to /resources/assests/. And everything is fine now.
Its all about the path. Sorry i am pretty new with webpack and didn't know about that.
#import "bourbon/bourbon";
Have a look at the installation guideline here: https://github.com/thoughtbot/bourbon#requirements
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
how to configure WebStorm to start with Sass? The best is to not install Ruby, so I should use Gulp as I know. But what to do with it? Have anybody WebStorm and may give me step by step instructions?
I am beginner front-end dev, fresh with Sass and I need your help. Thanks!
Please see http://ryanchristiani.com/getting-started-with-gulp-and-sass/ - you may find this post helpful. But note that gulp-sass is a wrapper around libsass, there are lots of known issues installing it... So installing Ruby might be a better option. See also https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
Install Ruby
https://rubyinstaller.org/downloads/
2.instal sass: please type in cmd => gem install sass
Instructions: https://sass-lang.com/ruby-sass
3.set in webstorm
Setting -> Tools -> File Watcher -> Add SCSS
Program: C:\Ruby25-x64\bin\scss
if you want to be compressed css, write " --style compressed " Continue to write the command Arguments.
Example: $FileName$:$FileNameWithoutExtension$.css --style compressed
I'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.