Question

我使用的是React 16，Webpack 3和Bootstrap 4 beta。

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

任何帮助改进我的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

我在我的网站上添加了规则 - 见下文：

spanningTree()

所以现在我可以这样做：

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" }
          ]
        },
      ]
    },

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,
                 },
            },
        ],
    }
}

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

3 个答案: