0

I have included this module into my project via composer require: https://github.com/JakeSharp/ProductSliderM2

This module has three css files that are being added to each page by the vendor/jakesharp/module-productslider/view/frontend/layout/default.xml handle:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="JakeSharp_Productslider::css/slick.css" />
            <css src="JakeSharp_Productslider::css/slick-theme.css" />
            <css src="JakeSharp_Productslider::css/productslider.css" />
        </head> 
...

Eeach css files have .less representatives in this folder:

vendor/jakesharp/module-productslider/view/frontend/web/css/.

I want to override:

vendor/jakesharp/module-productslider/view/frontend/web/css/slick.less .

I have added the slick.less file in my custom theme which has blank theme as parent:

app/design/frontend/Myvendor/mycustomtheme/JakeSharp_Productslider/web/css/slick.less

Configured my dev/tools/grunt/configs/themes.js to watch this file also, by:

mycustomtheme: {
    area: 'frontend',
    name: 'Myvendor/mycustomtheme',
    locale: 'ro_RO',
    files: [
        'css/styles-l',
        'css/styles-m',
        'JakeSharp_Productslider/css/slick' // <--- adding this line
    ],
    dsl: 'less'
}

When I clean var/* and pub/static/* folders and ask for this css file:

http://mysite.lh/static/frontend/Myvendor/mycustomtheme/ro_RO/JakeSharp_Productslider/css/slick.css

The file is loaded as expected, by compiling the .less from mycustomtheme instead the one from vendor/ .

But when I do grunt exec:mycustomtheme I receive this error:

Processed Area: frontend, Locale: ro_RO, Theme: Myvendor/mycustomtheme, File type: less.
-> css/styles-l.less
-> css/styles-m.less
>> [Magento\Framework\Exception\FileSystemException]
>>   The "/var/www/html/mysite/" file doesn't exist or not a file
>>
>>
>>
>> dev:source-theme:deploy [--type="..."] [--locale="..."] [--area="..."] [--theme="..."] [file1] ... [fileN]
>> Exited with code: 1.
Warning: Task "exec:mycustomtheme" failed. Use --force to continue.

Aborted due to warnings.

So the static deploy feature follows magento fallback mechanism but I am not capable on making grunt understanding the same thing and watch the slick.css file.

Many thanks for reading this long post! Any help appreciated,

Thanks!

Improve this question

1 Answer 1

Reset to default
0

Magento will automatically pick up the app/design/frontend/{{vendor}}/{{theme}}/web/css/source/_extend.less file in your theme, so the way i would include those styles is by placing the slick.less file in your theme and calling it from the _extend.less with @import 'slick.less';. Your styles will get pulled in last and you will be able to change what you need and have it override the styles loaded by the module.

Improve this answer
1
  • Thanks for your reply! The problem with this approach is that if you use it you won't overwrite the css but you'll extend it which means you'll still load the old rules but the extended ones will be used instead. Second, if the static deploy mechanism respects the magento fallback mechanism which means you can change completely the rules in the slick.less file by adding it on your theme, why grunt won't do the same ? Your solutions works though, thank you!
    – Florin-Adrian Serbu
    Jul 1, 2016 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.