Posso avere un singolo file di variabili usando cssnext con webpack?

Question

Ho un progetto che ha una serie di file CSS (uno per ciascun componente di reazione). Sto usando il css-loader (con i moduli su) nel webpack e anche postcss-cssnext.

Idealmente voglio un singolo variables.css così posso condividere le variabili tra i file css. Ho provato a dover variables.css contenente qualcosa come:

:root { 
    --gutter-width: 1rem; 
    --outer-margin: 2rem; 
    ... 
} 

che ho poi importare in modo che passa attraverso il caricatore css. Il problema è che altri file non rilevano su queste variabili, quindi o questo non funziona o sto facendo qualcosa di sbagliato (incluso ciò nel file css del componente direttamente funziona).

Una cosa che fa il lavoro sta avendo un file styles.json con la seguente configurazione webpack:

postcss: function (webpack) { 
    return [ 
     ... 
     require("postcss-cssnext")({ 
      features: { 
      customProperties: { 
       variables: require('./src/styles.json') 
      } 
      } 
     }) 
     ... 
    ] 
} 

Il problema principale di questo è però ogni volta che cambio una variabile devo riavviare il server dev webpack (così ricaricare la configurazione del pacchetto web). Questo non è l'ideale

Quindi, qualche idea su un modo migliore per farlo?

Answer 1

Le variabili (almeno al momento) non sono condivise tra i file css importati in cssnext-loader, anche se li si inserisce in: root {}.

La soluzione simples che ho trovato è quella di usare il plugin postcss-import prima di postcss-cssnext. Dopo averlo configurato, è necessario
@import 'variables.css';
all'interno di file .css in cui si desidera accedere a tali variabili.

Answer 2

Utilizzare postcss-import è la strada da percorrere. Ecco un config del campione utilizzando i moduli CSS:

{ 
    test: /\.css$/, 
    loader: ExtractTextPlugin.extract(
    "style", 
    "css?modules&localIdentName=[name]--[local]&sourceMap&importLoaders=1!postcss" 
) 
} 

E nelle impostazioni postcss:

postcss: [ 
    require("postcss-import")({ 
    path: baseDir, 
    addDependencyTo: webpack 
    }), 
    require("postcss-cssnext") 
] 

L'impostazione path dice postcss-import per risolvere i percorsi da anche cercando nelle directory specificate qui.

E, infine, nel vostro file CSS del modulo, dicono Button.css:

@import "styles/constants/constants.css"; 

.normal { 
    font-size: 24px; 
    color: var(--figmaBlue); 
}