隔離風格不同的佈局（的WebPack，反應）

Question

我有兩個佈局（LayoutWithShortHeader，TestLayout）和這樣的路線：

export default (
    <Router history={createBrowserHistory()}> 

    <Route path="/" component={ LayoutWithShortHeader }> 
     <IndexRoute component={ Index }/> 
    </Route> 

    <Route path="/" component={ TestLayout }> 
     <Route path="ddd" component={ TestPage }/> 
     <Route path="not-found" component={ NotFound }/> 
    </Route> 

    <Redirect from="*" to="/not-found"/> 

    </Router> 
); 

當我打開/ DDD的頁面由TestLayout與TestPage裏面。 不幸的是，它有LayoutWithShortHeader（導入'./layout.sass';內部LayoutWithShortHeader）的樣式，我不知道爲什麼。

TestLayout.jsx：

'use strict'; 

import React from 'react'; 

const TestLayout = React.createClass({ 

    propTypes: { 
    children: React.PropTypes.object 
    }, 

    getInitialState() { 
    return {}; 
    }, 

    render() { 
    return (
     <div> 
     { this.props.children } 
     </div> 
    ); 
    } 
}); 

export default TestLayout; 

的WebPack CONFIGS：

webpack.common.config.js：

'use strict'; 

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const Sprites = require('sprite-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     include: path.join(__dirname, 'src'), 
     loaders: ['react-hot', 'babel', 'eslint'] 
     }, 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css'] 
     }, 
     { 
     test: /\.sass$/, 
     loaders: ['style', 'css', 'postcss', 'sass?indentedSyntax'] 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ] 
     }, 
     { 
     test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
     loader: 'file-loader' 
     }, 
     { 
     test: require.resolve('jquery'), 
     loader: 'expose?jQuery' 
     }, 
     { 
     test: require.resolve('jquery'), 
     loader: 'expose?$' 
     } 
    ] 
    }, 
    postcss: function() { 
    return [autoprefixer({ browsers: ['last 3 versions'] })]; 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.js', '.jsx', '.json'] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Netology', 
     template: './src/index.html', 
     scriptFilename: 'application.js' 
    }), 
    new Sprites({ 
     'source': __dirname + '/src/images/for_sprites/', 
     'imgPath': __dirname + '/src/images/', 
     'cssPath': __dirname + '/src/stylesheets/', 
     'multiFolders': true 
    }) 
    ], 
    resolve: { 
    root: path.resolve(__dirname), 
    alias: { 
     js: 'src/javascripts', 
     fonts: 'src/fonts', 
     components: 'src/components' 
    }, 
    extensions: ['', '.js', '.jsx', '.sass'] 
    } 
}; 

webpack.config.js： '使用嚴格';

const path = require('path'); 
const webpack = require('webpack'); 
const friendlyFormatter = require('eslint-friendly-formatter'); 
let config = require('./webpack.common.config'); 

config.entry = [ 
    'webpack-dev-server/client?http://0.0.0.0:3000', 
    'webpack/hot/only-dev-server', 
    './src/javascripts/main.js' 
]; 

config.output = { 
    path: path.join(__dirname, 'build'), 
    filename: 'application.js', 
    publicPath: '/' 
}; 

config.eslint = { 
    formatter: friendlyFormatter 
}; 

config.plugins.push(
    new webpack.NoErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
); 

module.exports = config; 

那麼如何從另一個樣式中分離一個佈局的樣式？

Answer 1

終於讓它爲我工作。在組件中添加這個樣式。

componentWillMount() { 
     styles.use(); 
    } 

    componentWillUnmount() { 
     styles.unuse(); 
    } 

在你的WebPack配置爲青菜使用的樣式如下。

loaders: ['style/useable', 'css', 'postcss', 'sass?indentedSyntax'] 

更好的解決方案是創建一個裝飾器，將其應用於所有組件。

import React, { Component } from 'react'; 

function LazyLoadStyles(styles) { 
    return (BaseComponent) => class StyledComponent extends Component { 

    componentWillMount() { 
     styles.use(); 
     } 

    componentWillUnmount() { 
     styles.unuse(); 
    } 

    render() { 
     return <BaseComponent {...this.props} />; 
    } 
    }; 
} 

export default withStyles; 

然後你就可以在你的組件使用它像

import lazyLoadStyle from './LazyLoadStyles'; 
import st as './Page.sass' 

@lazyLoadStyle(st) 
class Mycomponent extends React.Component { 

.... 
} 

編輯： 重命名衝突的.sass文件.useable.sass，變裝載機這樣的 -

{ 
    test: /\.sass$/, 
    loaders: ['style', 'css', 'postcss', 'sass?indentedSyntax'] 
    }, 
    { 
    test: /\.useable.sass$/, 
    loaders: ['style/useable', 'css', 'postcss', 'sass?indentedSyntax'] 
    }, 

然後在你所有的模塊有衝突的CSS。你必須使用style.use（）和unuse（）或使用提供的裝飾器。