Grunt结合了SCSS和CSS文件

Question

In my application SCSS files gets compiled to CSS files and all the files included in one main.css file. There are some other CSS files which also gets included in main.css file, how can I using Grunt create one CSS file from all these CSS and SCSS files?

Note: All my CSS file is in client folder and SCSS file after compilation goes to public folder.

MSK

Answer 1

What you are looking for is (file)- concatination .

There is an excellent plugin for grunt: grunt-contrib-concat

Example-Configuration (static):

concat: {
    dist: {
        //Add your files to src
        src: [
          'client-folder/file1.css',
          'public/compiled.css'
           ],
      dest: 'output/style.css',
    },
},

Example-Configuration (dynamic):

concat: {
    dist: {
        src: [
          //Will use all .css files in client-folder/
          'client-folder/**.css',
          'public/compiled.css'
           ],
      dest: 'output/style.css',
    },
},

grunt concat:dist will then concat the content of your src files into the dest file.

You can dig deeper into the documentation for more grunting fun.