web-dev-qa-db-ja.com

grunt-sassを使用して複数のscssファイルをコンパイルする方法

複数の.scssファイルを1つのCSSファイルにコンパイルしようとしています。これは実際には機能しますが、最初のファイルを取得するだけです...

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/*.scss'
     }

   }
}

Rubyがインストールされていないため、grunt-contrib-sassはオプションではありません。このようにスタイラスで同じことを行います...

stylus: {
  compile : {
    files : {
      'css/g.css' : 'stylus/*.styl'
    }
  }
}
sassgruntjsgrunt-contrib-sass
25
Jackie

grunt-contrib-concat 最初？

concat: {
       dist: {
         src: [
           'sass/*.scss',
         ],
         dest: 'sass/build.scss',
       }
     },

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/build.scss'
     }

   }
}

次にタスク：

grunt.registerTask('sass', ['concat', 'sass']);

編集

@import？私は詳細の専門家ではありませんが、ここで私がしていることは...

dir /

main.scss
_nav.scss
_vars.scss
etc.

main.scss

@import "nav";
@import "vars";
etc.
22
Jordan Foreman

私は同じ問題を抱えていたので、これに触れたいだけで、これは実際に機能します：

    sass: { // Task
       dist: {         
         files: [{
             // Set to true for recursive search
             expand: true,
             cwd: 'scss/',
             src: ['**/*.scss'],
             dest: 'css/',
             ext: '.css'
         }]
       }
    }

それがどうなるか教えてください！

11
Aaron Olin

「grunt-sass-globbing」を使用できます。 Gruntfileで指定したすべてのインポートを含むSCSSファイルが生成されます。 https://www.npmjs.com/package/grunt-sass-globbing/

このオプションを使用すると、ソースマップを保持でき、SCSSファイルを連結する必要はありません。

ステップ1：インポートファイルを作成する

sass_globbing: {
    your_target: {
        options: {
            useSingleQuotes: false,
            signature: '// Hello, World!'
        },
        files: {
            'imports.scss': 'partials/**/*.scss',
        }
    }
}

ステップ2：インポートファイルをコンパイルする

sass: {
    options: {
        sourceMap: true
    },
    develop: {
        files: {
            'main.css': 'imports.scss'
        }
    }
}
2
Ben Besuijen

Concatを使用したくない場合は、ディレクトリ内のすべてのファイルを指定できます。この例をチェックしてください： https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory

1
K.H.

とても簡単です。

2つのscssファイルでこの構造を持っているとしましょう：

   scss/
       core/file.scss
       templates/file2.scss
       main.scss

あなたがする必要があるのは、ルートscssフォルダーにmain.scssというファイルを作成し、すべてのscssファイルをインポートすることです。

例：main.scssは以下を持ちます：

@import "core/file.scss"
@import "templates/file2.scss"

grunt-contrib-sassを使用して、main.scssファイルを呼び出すだけです：

完了:)

//Sass ===============================
            var sass;
            config.sass = sass = {};

                //production
                    sass.dist = {
                        options: { style: "compressed"}
                        , files: {
                            "public/stylesheets/myapp.production.css" : "sass/main.scss"
                        }
                    };

                //development env.
                    sass.dev = {
                    options: { style: "expanded", lineNumber: true}
                    , files: {
                        "public/stylesheets/myapp.development.css" : "sass/main.scss"
                    }
                };
0
raduken