javascript - 如何使用 npm start 编译 ES6 (react) 组件和基础 sass

Question

我关注了this tutorial设置一个 react 项目，我想我已经成功了。安装后一切正常。

但我必须创建一个使用 Foundation 作为前端库的网站。当我运行 npm start 时，我上面链接的教程会运行 server.js，但 Foundation-cli 使用相同的命令将所有 Foundation sass 代码编译为 css。

目前，当我运行npm start时，它只运行react，而不运行foundation。我怎样才能也运行基金会？我可以让它自动运行两者吗？

Answer 1

由于您已经在使用 Webpack，我建议您使用其中一个加载器并用它编译 CSS。 This one看起来它可以为你做到这一点。

这尚未经过测试，但我假设您可以将其添加到您的 Webpack 配置中，如下所示:

// be sure to install it with
// npm install sass-loader node-sass --save-dev

const path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: [
    './main.js',
  ],
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }
      }
    ],
  },
  resolve: {
    modules: [
      path.join(__dirname, 'node_modules'),
    ],
  },
};