I have this test Wordpress site http://test.fluxmusic.net/ and I have my css and js file working, but I can't find how to make scss files work.
SCSS files must be compiled to css first before enqueuing them. You will need to install a plugin like:
https://wordpress.org/plugins/wp-scss/
Hope this helps
Related
Only recently jumped on to the Laravel and Bootstrap 4 bandwagons, alas I have got Laravel 5.5 running with Bootstrap 4.0 no problem.
Sooo, I have getbootstrap.com Dashboard theme but I'm unclear on how to compile the themes assets and dependancies, i.e. what do I do with the gulpfile.js and package.json?
Note: I am using Laravel 5.5.34 and Bootstrap 4.0.0. I would rather learn how to compile assets using Laravel Mix and migrate from Gulp to Webpack, than simply copy the dist CSS to the public directory or link to the CDN in blade templates.
I was going through the same dilemma and this answer from Jeffrey Way has helped me.
I have created a css folder in resources/assets folder ( now it looks like resources/assets/css ). I copied all the css files that came with the theme to this folder.
And i updated the webpack.mix.js file in the root of the application
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now when i run npm run dev all the css is compiled into a single file in pubilc/css/app.css and js in public/js/app.js
Note: My theme also came with a js file which is named app.min.js
So i inluded it in public/js/app.min.js as the main compiled file name is app.js. If your theme has a file app.js rename it to theme.js and place in the public/js folder.
You can call these the normal way you do after compiling them with {{asset('css/app.css') }}
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
I have the following files tree
sass
main.scss
bg
colores.scss
style.scss
www
lib
ionic
scss
bg
ionic.scss
css
bg
ionic.app.min.css
style.css
androidEspecial.css
main.css
I need a file with all application colors. So, I made colores.scss. I need a way to watch changes in that file, and, if it changed, compile more than one scss.
I was wondering if there's a way to watch for sass/bg/colores.scss, and, if it changes, compile sass/main.scss, and also www/lib/ionic/scss/bg/ionic.scss.
I could do that mannualy, but that's not the point.
Is there a way to do so?
You can try using partials.
use _colores.scss
And import this partials in your main.scss
I want to use Laravel Elixir to minify my css/files files. But I don't want to use the mix-methode and merge them. All I want is to generate a "custom.min.js" file from my original "custom.js". Is there a way to do this with Elexir?
EDIT:
To make it a bit clearer: My biggest issue is that I have two folders in "resources/assets": js and css. So I basically want to minify all files in there and have them minified in "public/js" and "public/css".
Quote from the Laravel documentation:
Note: All tasks will assume a development environment, and will exclude minification. For production, use gulp --production.
This means if you want the files to be minified run gulp --production instead of just gulp. It's a better practise than enabling compression directly in the gulp file and makes sure you can debug your compiled files while developing the application.
If you want them to be placed in public/assets/css use the path as a second parameter:
mix.less('app.less', 'public/assets/css');
gulp --production.
Jeffrey way replied on the issue here: https://laracasts.com/discuss/channels/elixir/elixir-doesnt-minify
Or you can find it on the documentation. Enjoy coding!
If you just want to copy .css files, without using LESS or SASS, and don't want to combine files (i.e. you want something like a copy() method with minification ability) you can use method for combining, styles(), by calling it for every .css file and passing filename string without array, for example:
mix.styles('some.css');
mix.styles('node_modules/bootstrap/dist/css/bootstrap.css', null, './');
Same can be done for .js files using scripts() method:
mix.scripts('some.js');
mix.scripts('node_modules/bootstrap/dist/js/bootstrap.js', null, './');
And then you can use gulp (doesn't minify, creates .map files) or gulp --production (creates minified files) as mentioned in above posts.
Straight from the Laravel/Elixir docs:
Elixir is built on top of Gulp, so to run your Elixir tasks you only need to run the gulp command in your terminal. Adding the --production flag to the command will instruct Elixir to minify your CSS and JavaScript files:
Run all tasks... gulp
Run all tasks and minify all CSS and JavaScript... gulp --production
docs: https://laravel.com/docs/5.3/elixir#running-elixir
I wanted today to try scss support of yeoman.
I followed the procedure :
$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt server
And then the default view load but without style formatting. In the console I can see that it cannot find /styles/main.css file.
I have seen that compass put the file in .tmp/styles/main.css, so I tried to change it in index.html. But the same. Moreover there is no .tmp directory in my project folder.
So I ran "grunt build" and loaded the index.html in dist directory in a MAMP server. Same, no css formatting, moreover no error in the console
You shouldn't be putting the '.tmp' path anywhere in your index.html, it should be left pointing to 'styles/main.css' like so:
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
You should also have your actual style file at 'app/styles/main.scss', which Yeoman should have created for you. When you run 'grunt server' it uses compass to compile all the scss files into a single css file which it temporarily puts under '.tmp', but as long as your scss files are in place you should not need to worry about this. My guess would be that you've somehow deleted or renamed the main.scss file; you should not be renaming this to 'main.css' for example.
I had the same issue, your main.scss file has issues with bootstrap css
I deleted the line ( 2. line )
#import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
and have no more issues. it compiles to main.css