[英]webpack config is not working for my scss files :(
我正在嘗試使用CSS模塊和Sass加載程序。 但是,似乎沒有用。 這是我的webpack配置-它不會引發任何錯誤,但是當我檢查/static/
我只看到bundle.js而不是style.scss。
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: path.resolve(__dirname),
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'react-hot',
'babel'
],
include: path.join(__dirname, ''),
exclude: /node_modules/
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'autoprefixer-loader', 'sass-loader'])
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('/static/style.css', {
allChunks: true
})
]
};
您只需要添加文件名而不是文件路徑(因為它基於publicPath)
...
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'react-hot',
'babel'
],
include: path.join(__dirname, ''),
exclude: /node_modules/
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'autoprefixer-loader', 'sass-loader')
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('style.css', {
allChunks: true
})
]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.