允许 CSS 模块和导入答案

【问题标题】：Allow both CSS modules and imports允许 CSS 模块和导入
【发布时间】：2016-04-27 17:59:56
【问题描述】：

我对 Webpack 还是很陌生。基本上现在它已设置为支持 React css-modules。但是，我希望它也只支持普通导入，例如

import classes from './My-Classes.scss'

import './My-Other-Classes.scss'

对于前者，我有

{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },

是否可以同时允许两种导入方式，如果可以，如何实现？

谢谢。

【问题讨论】：

你为什么要导入你的 scss 文件？
@JohnRuddell 我应该提到这是 ReactJS。
我知道你正在使用 react。我用它所有的时间。我只是不明白导入 scss 文件的意义。你应该把它全部编译成一个通过 html 静态加载的文件
@JohnRuddell 我猜我同意不同意。我发现这更有条理。
所以你要在每个反应组件中导入你的 scss 文件？然后用它做什么？

标签： css reactjs webpack

【解决方案1】：

尝试将其添加到您的 webpack 配置文件中：

module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loaders: ['style', 'css']
      }
    ]
  }

您需要将这些模块添加到您的 package.json 中：

css-loader
sass-loader
style-loader

【讨论】：

尝试用我的代码替换你的代码。它对我有用