我有两种布局(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 内),我不知道为什么。
测试布局.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 配置:
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;
那么如何将一种布局的样式与另一种布局的样式隔离开呢?