1

Hi I am new to Magento 2, I was wondering what methods people are using to keep CSS changes after they deploy static content as CSS changes are overwritten every time.

Thanks!

Sourav
  • 1,298
  • 8
  • 16
Damion
  • 11
  • 1
  • I think it'd be beneficial to explain whether it's ALL css changes or only a couple rules you've set up that seem to be overwritten, more details would be a very good idea to add to this question, as far as i'm aware my CSS changes don't change after redeployment – John Apr 11 '18 at 09:01
  • Mainly design changes to a templates CSS files, they are located in pub/static and are overwritten everytime you deploy static content – Damion Apr 11 '18 at 09:13
  • 1
    Never work in static folder files. – Sourav Apr 11 '18 at 09:13
  • I give you steps – Sourav Apr 11 '18 at 09:13
  • As Sourva points out, first thing's first never work in the static files, you want to overwrite CSS from your theme – John Apr 11 '18 at 09:24
  • https://magento.stackexchange.com/questions/108685/how-to-add-a-custom-css-file-in-magento-2 you may want to refer to this answer on how to set up custom CSS. – John Apr 11 '18 at 09:27

1 Answers1

2

Never work in cache css files in pub/static folder. Files under this folder always overwritten when deploy command is run.

Option: Installing and configuring Grunt

Magento has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:

Install node.js to any location on your machine. Install Grunt CLI tool globally. To do this, run the following command in a command prompt:

npm install -g grunt-cli

Install (or refresh) the node.js project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt: cd npm install

Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:

module.exports = {

    <theme>: {
        area: 'frontend',
        name: '<Vendor>/<theme>',
        locale: '<language>',
        files: [
            '<path_to_file1>', //path to root source file
            '<path_to_file2>'
        ],
        dsl: 'less'
    ...
    },

After configure run following commands:

grunt clean: eg: customtheme is name of my theme

Republishes symlinks to the source files to the pub/static/frontend/// directory.

grunt exec:

Compiles .css files using the symlinks published in the pub/static/frontend/// directory

grunt less:

Tracks the changes in the source files, recompiles .css files, and reloads the page in the browser pages

grunt watch

Sourav
  • 1,298
  • 8
  • 16
  • I don't think resorting to Node.JS or Grunt would at all be beneficial, the key information required to answer is how to create a theme and use your css in that theme – John Apr 11 '18 at 09:25
  • are you working directly css files under static folder ?? – Sourav Apr 11 '18 at 09:29
  • No, this answer https://magento.stackexchange.com/questions/108685/how-to-add-a-custom-css-file-in-magento-2 explains how you should add custom css. – John Apr 11 '18 at 09:32