CSS模块转换和热重装

时间:2018-07-23 20:43:13

标签: reactjs webpack sass hot-reload

我在.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
                ];
              }
            }
          }
        ]
      }

    ]
  }
};

0 个答案:

没有答案