Theme .less not loading - extend and stylesheet

azmaer · ‎01-20-2016

Hello,

i wanted to see how to build theme but, first i downloaded example theme which i am going to change. I have found Vigoss from Venustheme and in: app\design\frontend\Magento\Venustheme\vigoss\web\css is stylesheet.less which contains:

@import "source/lib/_variables.less";
@import "bootstrap/_variables.less";
@import "bootstrap/_mixins.less";
@import "magento/_variables.less";
@import "magento/_layout.less";
@import "magento/_block.less";
@import "magento/_menu.less";
@import "magento/_responsive.less";

but those files isn't compiling and theme is not complete.

I have turned off cache and i did remove files from: pub/static/frontend/<Vendor>/<theme>/<locale>
Also i did remove files from: /var/view_preprocessed/css/frontend
and from: /var/cache/

My site address is http://www.lovemilano.pl/index.php
Demo of vigoss is: http://demoleotheme.com/vigoss/index.php/

Also i modified stylesheet to contain only:

@import "source/lib/_variables.less";
@import "bootstrap/_variables.less";
@import "bootstrap/_mixins.less";

@import "magento/_block.less";
@import "magento/_menu.less";
@import "magento/_responsive.less";

and i have added to app\design\frontend\Magento\Venustheme\vigoss\web\css\source
file '_extend.less'

and in this file i have added:

@import "_variables_extend.less";
@import "_layout_extend.less";

exactly how it is written here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html

Yet those files are still doesn't loading.

i also checked if stylesheet is added here:

app\design\frontend\Magento\Venustheme\vigoss\Magento_Theme\layout\default_head_blocks.xml

And it is added like that:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 
        <!-- Add local resources -->
        <css src="css/bootstrap-tiny.css"/>
        <css src="css/stylesheet.css"/>
        <css src="css/font-awesome.min.css"/>
        
        <css src="https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic" src_type="url"/>
        <css src="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic" src_type="url"/>
    </head>
</page>

So what i am missing? Why those rules aren't loaded? No metter what i do in /source/_xxx.less files it doesn't matter, nothing is changed.

azmaer · ‎01-20-2016

also, when i am deleting files manually sometimes magento just doesn't creaty anykind of style-l / m .css (manually + flush cache in admin)

Ok, removing manualy from pub/static -> css only is cusing no compaling css

azmaer · ‎01-20-2016

So now i have created simple 'test.less' file and i put it like the other files here: app\design\frontend\Venustheme\vigoss\web\css\test.less

also i have added into: app\design\frontend\Venustheme\vigoss\Magento_Theme\layoutdefault_head_blocks.xml

this rule:

        <css src="css/test.css"/>

and it is still not creating this css file, still: 404 (Not Found) error.

How to check why it is not creating it?

Dmitry_Fedyuk · ‎01-24-2016

How to add JavaScript / CSS / Less with a custom module: https://mage2.pro/t/34
How to add a stylesheet to a page after the layout has already been built: https://mage2.pro/t/149

Theme .less not loading - extend and stylesheet

Theme .less not loading - extend and stylesheet

Re: Theme .less not loading - extend and stylesheet

Re: Theme .less not loading - extend and stylesheet

Re: Theme .less not loading - extend and stylesheet