我在.babelrc中使用css-modules-transform来运行带有一些scss的ssr应用程序,在我的应用程序上,我还使用了热重载中间件来重载所有组件,并且一切正常,但不是很热-用scss重新加载,我在做什么错?....这是我启动应用程序的方式:
start: BABEL_ENV=server BABEL_DISABLE_CACHE=1 babel-node server.js
这是我的babelrc:
{
"presets": [
"env",
"react",
"stage-2"
],
"plugins": [
"transform-runtime"
],
"env": {
"server": {
"plugins": [
[
"css-modules-transform",
{
"preprocessCss": "./sass-loader.js",
"generateScopedName": "[name]_[local]_[hash:base64]",
"extensions": [
".scss"
],
"extractCss": "./dist/bundle.css"
}
]
]
}
}
}
这里是sas-loader:
const sass = require('node-sass');
module.exports = (data, file) => {
try {
return sass.renderSync({ data, file }).css.toString('utf8');
} catch (e) {
console.error(e);
}
};
这是我的webpack:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
mode: 'development',
devtool: '#eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/app.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
resolve: {
extensions: ['.js'],
alias: {
request: 'browser-request'
}
},
module: {
rules: [
// Javascript
{
test: /\.js/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
query: {
"env": {
"development": {
"plugins": ["react-hot-loader/babel"],
}
},
}
},
// CSS
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64]',
sourceMap: true,
minimize: true
}
},
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
autoprefixer
];
}
}
}
]
}
]
}
};