css模块化配置

Question

老师，我看11章的时候遇到难题了，您可一定要帮我，我卖您的课程的一个原因就是学习自己配环境。。。

ant design的文档里https://ant.design/docs/react/use-with-create-react-app-cn 有这么一句话

@import '~antd/dist/antd.css';  它导入了模块里的css文件，我在配置环境的时候loaders里是这么写的

    {

        test: /\.css$/,

        loaders: [

          'style',

          'css',

        ],

      },

      {

        test: /\.scss$/,

        exclude: /node_modules/,

        loaders: [

          'style',

          'css?importLoaders=1',

          'postcss',

          'sass',

        ],

      },

主要就是我想写代码的时候使用css的模块化操作，但是引入的antd里的css不应该被模块化，所以我网上搜了解决方法http://stackoverflow.com/questions/35398733/css-modules-how-do-i-disable-local-scope-for-a-file。这里面三个方法我都试了，没一个成功了，我也实在不知道怎么搞了

Answer 1

Parry 2017-03-07 21:07:31

没事，我会帮你的，你看下问题是不是我理解的那样。或者你发源码给我也行。

Answer 2

Parry 2017-03-07 14:55:04

你的需求是？想 css 按照需求加载还是？和之前你的提问一样，你简单描述问题，就说你要实现的目的。「主要就是我想写代码的时候使用css的模块化操作」是指？

Answer 3

提问者 慕用8116058 2017-03-07 17:50:03

我想使用css-loader时使用css模块，就是css loader配置里加上modules: true，但是我写的scss文件里可能会引用css文件，这个文件在编译的时候其中的类名也会被修改模块化

const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'boundle.js',
    publicPath: 'build',
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          plugins: [
            'transform-decorators-legacy',
            'transform-class-properties',
            ['import', [{ libraryName: 'antd', style: 'css' }]],
          ],
          presets: ['es2015', 'react', 'stage-2'],
          // cacheDirectory: true,
        },
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css',
        ],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: [
          'style',
          'css?modules&importLoaders=1',
          'postcss',
          'sass',
        ],
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=8192',
      },
    ],
  },
  postcss: () => [
    autoprefixer({
      browsers: ['last 5 versions'],
    }),
  ],
};

这个是我的webpack config文件，其中scss文件引入的css文件一样会编译成为局部的类名，事实上我如果写css的话不想被模块化，也就是css中的loader的配置没有设置为modules，但是这样设置不生效啊

• Parry #1

  如果我没有理解错误的话，你是要 css 不走 scss 的 loader？
  和这个问题一样的？https://github.com/css-modules/css-modules/pull/65