React组件有css文件，我没有导入

Question

我刚刚在我的组件登录页面中导入了一个scss文件

import React, { Component } from 'react';
import FeaturedRestaurant from '../restaurant/RestaurantFeatured';
import './css/landing_style.scss';

但是当我看到控制台它有六个css文件，我在其他组件中导入，我怀疑webpack使scss文件可用于所有其他组件

屏幕截图如下

这是我的webpack配置

var path = require('path');
var webpack = require('webpack');
require('babel-core/register');
require('babel-polyfill');

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    path: '__dirname',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,

        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.css$/,
        loaders: ['style', 'css', 'sass']
      }
    ]
  },
  devServer: {
    port: 3000,
    historyApiFallback: true,
    contentBase: './',
    proxy: {
      '/auth/google': {
        target: 'http://localhost:5000'
      },
      '/api/*': {
        target: 'http://localhost:5000'
      }
    }
  }
};

Answer 1

很多时候，sass文件可以导入其他资源或样式表。

// base.scss

@import 'main.scss';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

一旦页面被翻译，看起来就像你添加了多个样式表一样。