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

Question

我正在使用 React 16、Webpack 3 和 Bootstrap 4 測試版。

我正在嘗試使用類似於以下import styles from './styles/app.scss'東西import styles from './styles/app.scss'文件加載到 React 中。 目前我正在使用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';

Answer 2

讓它更簡單。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

---

    module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },

Answer 3

{
    test: /\.s[ac]ss$/i,
        use: [  
            {
                loader: "style-loader",
            },
            {
                loader: "css-loader",
                options: {
                    modules: true,
                    localsConvention: "camelCase",
                    sourceMap: true,
                },
            },
            {
                 loader: "sass-loader",
                 options: {
                     sourceMap: true,
                 },
            },
        ],
    }
}