1

This question already has an answer here:

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!

marked as duplicate by Jai, Manoj Deswal, Piyush, Priyank, Dhiren Vasoya Apr 11 '18 at 11:41

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 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 9: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 9:13
  • 1
    Never work in static folder files. – Sourav Apr 11 '18 at 9:13
  • I give you steps – Sourav Apr 11 '18 at 9: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 9:24
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

  • 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 9:25
  • are you working directly css files under static folder ?? – Sourav Apr 11 '18 at 9:29
  • No, this answer magento.stackexchange.com/questions/108685/… explains how you should add custom css. – John Apr 11 '18 at 9:32

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