想问一下,使用css-modules该怎么配置

coffeehc commented 6 years ago

因为之前用react的时候用了css-modules,现在迁移过来之后,发现默认配置不支持这个,于是在config里面加了rules单独处理,在看了源码之后发现您的配置里面有一个

{
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => getPostcssPlugins(buildConfig, platform, template)
            }
          }

这个配置,里面其实没法调用getPostcssPlugins这个方法,请指教一下,如果要加入css-modules的话,我该怎么处理这个配置,附上项目的config/index.js的这个配置.

const config = {
  // source files root directory
  sourceRoot: 'src',
  // output files root directory
  outputRoot: 'dist',
  // The publicPath specifies the public URL address of the output files when referenced in a browser
  // see https://webpack.js.org/guides/public-path/
  publicPath: '/',
  // the directory contains css/js/images/fonts/media etc. files
  staticDirectory: 'static',
  // define global constants for application see https://webpack.js.org/plugins/define-plugin/
  defineConstants: {},
  htmlSnippetDirectory: [
    'view'
  ],
  library: {
    name: 'base',
    directory: 'lib',
    libs: [
      'nervjs','axios','immutable','nerv-redux','react-route-dom'
    ]
  },
  // support functions
  module: {
    postcss: {
      // autoprefixer plugin config
      autoprefixer: {
        enable: true
      }
    },
    rules: [
      {
        test: /\.(css|scss|sass)(\?.*)?$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => getPostcssPlugins(buildConfig, platform, template)
            }
          },
          require.resolve('sass-loader')
        ]
      }
    ]
  },
  webpack:{
    resolve: {
      alias: {
        baseCss:'./src/common/asset/style/base.sass'
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

coffeehc commented 6 years ago

还有一点补充一下,我的sass里面还用到了composes,如:

.test
  composes: container from 'baseCss'
  margin-top: 5px

coffeehc commented 6 years ago

已经fork项目后修改代码解决,也提了rp,可以看看

luckyadam commented 6 years ago

好嘞~感谢感谢~

o2team / athena2

想问一下,使用css-modules该怎么配置 #9