3

Estou tentando concatenar (unificar) vários arquivos .css gerados a partir do SASS e estou usando o Compass para processar meus arquivos.

Estou usando o Grunt para executar algumas tarefas, inclusive para concatenar arquivos, porém como tento juntar os arquivos .css gerados, muitas das classes estão se repetindo no arquivo com os arquivos unificados. Ou seja, duplicando tudo que foi criado.

Alguém sabe se o Compass faz esse tipo de concatenação por padrão, além da compreensão dos arquivos?

2 Respostas 2

2

Você está usando https://github.com/yeoman/grunt-usemin? Se não estiver ele pode te ajudar no processo de concatenação, basta colocar no seu HTML:

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.css">
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery.ui.theme.css">
    <!-- endbuild -->

E no Grunfile adicione:

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
        options: {
            dest: '<%%= yeoman.dist %>'
        },
        html: '<%%= yeoman.app %>/index.html'
    },

    // Performs rewrites based on rev and the useminPrepare configuration
    usemin: {
        options: {
            assetsDirs: ['<%%= yeoman.dist %>']
        },
        html: ['<%%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%%= yeoman.dist %>/styles/{,*/}*.css']
    },
1
  • Valeu, resolvi com a sua solução. ;) Commented 16/03/2016 às 12:43
0

Você pode criar um arquivo main.scss e colocar nele os @imports dos .scss que você deseja concatenar. Depois é só compilar o main.scss:

$ compass compile main.scss

Exemplo de main.scss:

@import 'header.scss';
@import 'footer.scss';

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .