CSS/Less is not loading after theme activation

archived 🗄
1

I made a fresh roots (7.0.2) installation locally on Wordpress 4.0.1 running on MAMP Pro.
I followed the instructions step by step. I successfully installed previous versions before.

I do not use Bedrock so i added the following line to the wp-config.php file “define(‘WP_ENV’, ‘development’);”
The Installation “npm install” worked without any issue. After that i launched “grunt watch” without any issue as well. but after the theme activation, it does not load any css/less.
There is even a error message “…manifest.json): failed to open stream: No such file or directory…”
It seem like roots want to load the the “main.min.css” instead of “main.css”.

I looked for hours for a solution, reinstalled it a several times, but with out any success.
And yes i did search online as well for a solution, but that did not work out either.
What do i miss? Thanks a lot for your help.

2

Is there an error when you run Grunt?

3

Please post the full error message.

Also, move your define() statement to wp-config.php.

Also, what happens when you just run grunt? Post results please.

5

@cfx Thx a lot for your reply. Here is the full error message:

"Warning: file_get_contents(/Users/neongrain/Work/Venue/Webseite/wordpress-neu/wp-content/themes/venue-2/assets/manifest.json): failed to open stream: No such file or directory in /Users/neongrain/Work/Venue/Webseite/wordpress-neu/wp-content/themes/venue-2/lib/scripts.php on line 30"

It already in the wp-config.php file, i made a mistake in the description, i am sorry.

This happens if i just run grunt, it looks all fine to me as well:

485 neongrain:venue-2$ grunt
Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "less:dev" (less) task
File assets/css/main.css.map created.
File assets/css/main.css created: 153.76 kB → 153.82 kB

Running "autoprefixer:dev" (autoprefixer) task
File assets/css/main.css created.
File assets/css/main.css.map created (source map).

Running "concat:dist" (concat) task
File assets/js/scripts.js created.

Done, without errors.


Execution Time (2014-12-10 08:32:09 UTC)
jshint:all         97ms  ▇▇▇▇▇▇ 6%
less:dev          988ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 58%
autoprefixer:dev  601ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 35%
Total 1.7s

486 neongrain:venue-2$
6

@kalenjohnson no there is not

7

Did you read the actual error message in your last post? It’s telling you that there’s a file missing. Have you checked to see if the file in the error message is actually missing?

What happens when you run grunt build? Please post the full results.

1 Like
8

Yes I did read it, and yes the actual file was indeed missing, i noticed that already.
but why happens this with a fresh installtion?

Thanks a for the tip, i did run grunt build and it generated the missing file.
And it seems fine so far, it loads the css/less.

Then i started grunt watch…
but as i started developing and making changes to main.less it does not seem to take any effect on the design. As i did understand it so far it’s that grunt build is to build actual final product with all the minified css and js files. What do i miss? Thanks a lot for your patience.

487 neongrain:venue-2$ grunt build
Running "jshint:all" (jshint) task
>> 2 files lint free.

Running "less:build" (less) task
File assets/css/main.min.css created: 153.76 kB → 130.1 kB

Running "autoprefixer:build" (autoprefixer) task
File assets/css/main.min.css created.

Running "uglify:dist" (uglify) task
>> 1 file created.

Running "modernizr:build" (modernizr) task

Enabled Extras
>> load
>> cssclasses

Looking for Modernizr references

in assets/css/main.min.css
>> svg

Downloading source files
200 modernizr.load.1.5.4.js
200 modernizr-latest.js

>> Generating a custom Modernizr build
>> Uglifying

>> Wrote file to assets/js/vendor/modernizr.min.js

Running "version:default" (version) task
  Manifest file save to assets/manifest.json

Done, without errors.


Execution Time (2014-12-10 19:12:49 UTC)
jshint:all          103ms  ▇▇▇▇ 3%
less:build          748ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 21%
autoprefixer:build  264ms  ▇▇▇▇▇▇▇▇ 8%
uglify:dist         353ms  ▇▇▇▇▇▇▇▇▇▇▇ 10%
modernizr:build        2s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 58%
Total 3.5s

488 neongrain:venue-2$
9

You see the line in wp-config.php where it says /* That's all, stop editing! Happy blogging. */?

Did you put it above that?

1 Like
10

^ Ben’s answer to your question might solve the issue.

Just for clarification, yes, grunt build compiles minified files (which are loading in your case)
grunt dev is what you should be using during development, we just have to figure out why it’s not loading

1 Like
11

Hey @benword you saved my day. that was it, i just moved define('WP_ENV', 'development');
over the line /* That's all, stop editing! Happy blogging. */? and now it works perfectly fine.

Thanks all who took the time to help my with this problem. i hope it helps others too.

12

Thx for clarification, i was getting confused. I was using grunt watch on my previous successful installations. I just found this really good explanation from heitorss about it

grunt watch will run grunt dev when something is modified;

If someone else needs to know read his hole post [here][1]
[1]: Understanding new grunt watch/dev/build in v7.0 - #2 by heitorss