css - 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 文件可以导入其他 Assets 或样式表。

// base.scss

@import 'main.scss';

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

一旦页面被转译，如果是这种情况，它看起来就像您添加了多个样式表。