我正在项目中使用webpack,目前我正在尝试设置sass热重载。
当我运行“webpack-dev-server --inline --hot”时,我的main.scss被加载,其中导入了所有其他的css/scss,并且一切都很好。但是,只要我修改了一些东西,它就不会自动刷新,我必须重新启动webpack服务器。
这是我的webpack.config.js:
感谢您的帮助。
当我运行“webpack-dev-server --inline --hot”时,我的main.scss被加载,其中导入了所有其他的css/scss,并且一切都很好。但是,只要我修改了一些东西,它就不会自动刷新,我必须重新启动webpack服务器。
这是我的webpack.config.js:
module.exports = {
entry: JS_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
publicPath: '/public/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src/client',
inline: true,
hot: true,
port: 8080
},
module: {
loaders: [{
test: /\.jsx?/,
include: JS_DIR,
loader: 'babel',
}, {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
}]
},
resolve: {
root: path.resolve(CLIENT_DIR),
extensions: ['', '.js', '.jsx']
},
postcss: function() {
return [autoprefixer, precss];
}
};
index.jsx
import style from 'css/main.scss';
...
main.scss
@import './style.scss';
style.scss
h1 {
color: yellow;
}
感谢您的帮助。
loaders: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
呢? - Juho Vepsäläinen