Heim > Web-Frontend > HTML-Tutorial > 解決 Universal 架構的 CSS Modules 問題_html/css_WEB-ITnose

解決 Universal 架構的 CSS Modules 問題_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:59:41
Original
1055 Leute haben es durchsucht

最近在使用 React 和 Redux 建構一個 Isomorphic JavaScript(Universal)應用。

但是在實作 CSS Modules 的時候,會碰上兩個問題:

  • Server-side 的 Node.js 無法 import *.css。

  • 如果改成使用 process.env.IS_BROWSER 來判斷只在 Client-dide import,那又會碰到 Server-side 與 Client-side render 出來的 DOM 結果不一致的問題。

  • 解決方式:

    安裝 css-modules-require-hook 這個套件:

    npm install css-modules-require-hook --save-dev
    Nach dem Login kopieren

    修改 webpack config 的 css-loader 設定:

    // webpack.config.js{  // ...  module: {    loaders: [{      test: /\.css$/,      loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!!postcss-loader'    }]  }  // ...}
    Nach dem Login kopieren

    在 Node.js 的 main file 加入 css-modules-require-hook:

    // server.jsrequire('css-modules-require-hook')({  generateScopedName: '[name]__[local]___[hash:base64:5]'});// ...
    Nach dem Login kopieren

    注意 generateScopedName 的命名格式,必須與 css-loader 的 localIdentName 保持一致。

    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage