javascript - 如何在 React 和 Webpack 中使用 Sass-loader？

Question

我正在使用 React 16、Webpack 3 和 Bootstrap 4 beta。

我正在尝试使用类似于以下内容的方式将 .scss 文件加载到 React 中 import styles from './styles/app.scss'。目前我正在使用 import style from 'style-loader!css-loader!sass-loader!applicationStyles';。我不想在 .js 文件中使用 sass-loader。

任何改进我的 webpack 配置的帮助也将是最受欢迎的，因为它一团糟......

这是我的 webpack 文件:

const webpack = require('webpack');
const path = require('path');
const envFile = require('node-env-file');
require('babel-polyfill');


process.env.NODE_ENV = process.env.NODE_ENV || 'development';

try {
  envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) { }

module.exports = {
  entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'babel-polyfill',
    'whatwg-fetch',
    './app/app.jsx',
  ],
  externals: {
    jQuery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jQuery',
      'jQuery': 'jQuery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        API_KEY: JSON.stringify(process.env.API_KEY),
        API_DOMAIN: JSON.stringify(process.env.API_DOMAIN),
        API_FILE_DOMAIN: JSON.stringify(process.env.API_FILE_DOMAIN),
      }
    }),
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    modules: [
      __dirname,
      'node_modules',
      './app/api',
      './app/constants',
    ],
    alias: {
      applicationStyles: 'app/styles/app.scss'
    },
    extensions: ['.js', '.jsx']
  },
  devServer: { historyApiFallback: { index: 'public/index.html' }, },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
      // {
      //   loader: 'sass-loader',
      //   options: {
      //     includePaths: [ path.resolve(__dirname, './node_modules/bootstrap/scss')]
      //   },
      //   test: /\.scss?$/,
      // },
      {
        loader: 'css-loader',
        options: {
          includePaths: [path.resolve(__dirname, './node_modules/react-table/react-table.css')]
        },
        test: /\.css?$/,
      }
    ],
    // I tried this but it gave me an error
    // rules:[
    //   {
    //       test: /\.scss$/,
    //       use: [
    //         { loader: "style-loader" },
    //         { loader: "css-loader" },
    //         { loader: "sass-loader" }
    //       ]
    //    }
    // ],
  },
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map'
};

这是我的 App.jsx 文件中的导入

import 'bootstrap'
import style from 'style-loader!css-loader!sass-loader!applicationStyles';
import 'style-loader!react-table/react-table.css';

Answer 1

我将规则添加到我的 webpack - 见下文:

module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: { loader: 'babel-loader'}
        },
        { 
          test: /\.css?$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
          ]
        },
        {
          test: /\.scss$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        },
      ]
    },

所以现在我可以做:

import style from 'applicationStyles';
import 'react-table/react-table.css';