我正试图将font真棒和foundation之类的东西与React和css模块一起使用,但我不知道如何将它们正确导入我的项目中。
请注意,我使用HotModuleReplacementPlugin
和ExtractTextPlugin
来获得一个css文件。
在顶级组件的css文件中的某个地方,我希望能够只执行@import 'font-awesome';
,但我如何才能做到这一点,使文件按原样处理,并且类最终不会本地化为font_awesome__fa-check
等等?
这是我的webpack配置:
var paths = {
app: path.join(__dirname, './app/'),
dist: path.join(__dirname, './dist/'),
external: path.join(__dirname, './node_modules/'),
}
module.exports = {
entry: {
site: [
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/dev-server',
path.join(paths.app, '/index.js'),
]
},
output: {
path: paths.dist,
publicPath: '/',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
resolve: {
extensions: ['', '.js'],
root: paths.app,
alias: {
'font-awesome.css': path.join(paths.external, '/font-awesome/css/font-awesome.min.css')
}
},
module: {
loaders: [
{
test: /.jsx?$/,
loaders: ['babel'],
include: path.join(__dirname, 'app')
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader')
}
]
},
postcss: [
require('autoprefixer-core'),
],
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: path.join(paths.app, '/site.html'),
filename: 'index.html',
inject: 'body',
chunks: ['site']
}),
]
};
谢谢。
在配置加载程序时,可以利用include/exclude选项。
例如,假设您所有的自定义css都在/app/
目录中,而基础和字体则不在。
...
module: {
loaders: [
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader'),
include: path.join(__dirname, 'app')
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style-loader!css-loader'),
exclude: path.join(__dirname, 'app')
}
]
},
另一种选择是对使用css模块语法的文件使用不同的扩展名。您可以使用.mcss
。
...
module: {
loaders: [
{
test: /.mcss$/,
loader: 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1'
},
{
test: /.css$/,
loader: 'css-loader')
}
],
postLoaders: [
{
test: /.(css|mcss)$/,
loader: ExtractTextPlugin.extract('style-loader')
}
]
},