0

css-modules を postcss-cssnext とともに使用しています 、特にその postcss-custom-properties 機能

また、react-boilerplate ( https://github.com/mxstbr/react-boilerplate/ ) も使用しています。この非常に優れたボイラープレートには、これらのモジュールが使用されています。

私のフォルダ構造は次のとおりです。

Main folder
    app
        containers
            App
                styles.css
                index.js
            HomePage
                styles.css
                index.js

        components
            Component1
                styles.css
                index.js
            Component2
                styles.css
                index.js

アプリ/styles.css

:root {
    --varA: #1eb3ab;
    --varB: #1eb3ab;
    --varC: #1eb3ab;
    --varD: #1eb3ab;
    --varE: #1eb3ab;

}

body {
    color: var(--varA)  /*works fine */
}

これらの vars を App/styles.css で使用したい (または、別の場所でそれらを定義してよろしいですか。その場合、どのようにすればよいでしょうか)。

私は試しました（css-modulesで使用するため）

ホームページ/index.js

..
..

<div className={styles.myClass}> Content </div>

..

HomePage/styles.css -- アプローチ 1

:root{
  --varA: tealish from "containers/App/styles.css";     /* DOESNT WORK */
}

.myClass {
    color: var(--varA)
}

HomePage/styles.css -- アプローチ 2

.myClass {
    color: var(--varA from "containers/App/styles.css")     /* DOESNT WORK  AS WELL*/
}

最もエレガントなソリューションは何ですか? すべての変数を1つのファイル/1つの場所に配置し、すべてのcssファイルでそれらをうまく使用したい

variablespostcss-custom-properties https://github.com/postcss/postcss-custom-properties#variablesでも​​見ました。しかし、postcss-cssnext を使用する webpack 定義での使用方法がわかりません

webpack.dev.babe.js - ここに VARIABLES オプションを入れる方法

// Process the CSS with PostCSS
  postcssPlugins: [
    postcssFocus(), // Add a :focus to every :hover
    cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
      browsers: ['last 5 versions', 'IE > 8'], // ...based on this browser list

      // I think I need to add some line here, but not sure what


    }),
    postcssReporter({ // Posts messages from plugins to the terminal
      clearMessages: true,
    }),
    postcssAnimation(),
  ],
4

2 に答える 2

0

私は通常、postcss-importの助けを借りてこれを達成するため、「変数」を使用する必要があるすべてのモジュールは、パーシャルをインポートする必要があります。

@import 'path/to/variables';

.myClass {
  color: var(--colorGray);
}

このアプローチは、カスタム プロパティだけでなく、カスタム プロパティ セットでも機能します。

同様の質問です。

于 2016-10-27T07:18:18.193 に答える