Question

我在反应中使用服务器端渲染

正如此SSR样板中的建议，

https://github.com/erikras/react-redux-universal-hot-example

webpack.config.js：这是加载器部分看起来的样子 -

 module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
      { test: /\.json$/, loader: 'json-loader' },
      { test: /\.pcss$/, loader: 'style-loader!css-loader!postcss-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader'},
      { test: /\.less$/, loader: 'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
      { test: /\.scss$/, loader:
        'style!css?importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      { test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
    ]
  },

webpack-isomorphic-tools.js样式模块部分：

style_modules: {
      extensions: ['less','scss','css'],
      filter: function(module, regex, options, log) {
        if (options.development) {
          // in development mode there's webpack "style-loader",
          // so the module.name is not equal to module.name
          return WebpackIsomorphicToolsPlugin.style_loader_filter(module, regex, options, log);
        } else {
          // in production mode there's no webpack "style-loader",
          // so the module.name will be equal to the asset path
          return regex.test(module.name);
        }
      },

在我的组件中，render方法如下所示：

require('../../../styles/header_new.css');
  require('../../../styles/common_style.scss');

render() {


  return (
            <div className="some_class_from_commonstyleSCSS">
           </div>
)

我似乎已经遵循了所有步骤，但根本没有应用CSS。

我可以就此提出一些建议吗？

编辑：scss文件的快照：

@import "partial/header";
@import "partial/variables";
@import "partial/mixins";
@import "partial/login_signup";
@import "partial/footer";
@import "partial/sbl_popups";
@import "partial/track_order";
//@import "~font-awesome/scss/font-awesome";

body, html{
  font-size: $primary_font;
  font-family: $font_regular;
  height:100%;
  margin: 0px;
  padding: 0px;
  color: $primary_color;
  min-height:100%;
}

.mg_img1, .mg_img2, .mg_img3, .mg_img4, .mg_img5, .mobile_maga_img, .phone_sprite, .email_sprite, .add_sprite, .visaimg, .payment_icon, .swiper-button-magazine-next, .swiper-button-magazine-prev, .android_image, .ios_image {
  max-width: 100%;
  background-size: 100%;
  background-image: url(../images/commonsprite.png);
  //background-image: url(http://localhost:3000/src/images/commonsprite.png);

}

header_new.css

.hide-true  {
  display: none;
}

.login-true{
  display: none;
}

.login-false{
  display: block;
}

.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

这些在客户端渲染和ES6导入语句中运行良好。

这是我用来呈现HTML的函数：

function renderFullPage(html, preloadedState, assets = webpackIsomorphicTools.assets()) {

  console.log('ASSETSSSSSSSSSSSSSSS STYLESSS', assets.styles);
  console.log(assets)

  //console.log("ASSETTTTTTTTSSSSSSSSSSSSSSSSSSSSSSSSSSS ARE AS FOLLOWSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS", assets);
  //console.log("html to be inserted", html);
  //console.log("preloaded state in render full page", preloadedState);
  return `
    <!doctype html>
    <html>
       <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

    ${Object.keys(assets.styles).map((style, i) =>
    <link href={assets.styles[style]} key={i}
          rel="stylesheet" type="text/css"/>)
      }


     </head>
      <body>
        <div id="app">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
        </script>
         <noscript>
              <iframe src="//www.googletagmanager.com/ns.html?id=GTM-KMXH6S"
                      height="0" width="0" style="display:none;visibility:hidden"></iframe>
         </noscript>
          <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=false;j.src=
            '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-KMXH6S');
          </script>
          <div className="nanorep_loadingData" id="nanoRepProxyContainer" aria-live="polite" style={{position:'absolute', top: '-500px', left: 0}} />

      </body>
    </html>
    `

  {/*<script src="/static/dist/bundle.js"></script>*/}

}

使用require在反应JS

0 个答案: