Question

我正在尝试将babel-plugin-react-css-modules与create-react-app的弹出副本一起用于我的LESS CSS。

我已经成功安装并配置了插件，并且使用styleName属性正确设置了作用域类名，并且我已将其配置为使用LESS以及文档。

但是，在导入生成的CSS时，它不会转换类名以匹配元素上设置的类名。以下是我的webpack.config.dev.js和App.js文件的相关部分。

module: {
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    preLoaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'eslint',
            include: paths.appSrc,
        }
    ],
    loaders: [
        // ** ADDING/UPDATING LOADERS **
        // The "url" loader handles all assets unless explicitly excluded.
        // The `exclude` list *must* be updated with every change to loader extensions.
        // When adding a new loader, you must add its `test`
        // as a new entry in the `exclude` list for "url" loader.

        // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
        // Otherwise, it acts like the "file" loader.
        {
            exclude: [
                /\.html$/,
                // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
                // because you might change the hot reloading server from the custom one
                // to Webpack's built-in webpack-dev-server/client?/, which would not
                // get properly excluded by /\.(js|jsx)$/ because of the query string.
                // Webpack 2 fixes this, but for now we include this hack.
                // https://github.com/facebookincubator/create-react-app/issues/1713
                /\.(js|jsx)(\?.*)?$/,
                /\.(css|less)$/,
                /\.json$/,
                /\.svg$/
            ],
            loader: 'url',
            query: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]'
            }
        },
        // Process JS with Babel.
        {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: 'babel',
            query: {

                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                plugins: [
                    [
                        'react-css-modules',
                        {
                            //context: paths.appSrc,
                            webpackHotModuleReloading: true,
                            generateScopedName: "[local]___[hash:base64:5]",
                            filetypes: {
                                ".less": "postcss-less"
                            }
                        }
                    ],
                ],
            }
        },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS.
        {
            test: /\.(css|less)$/,
            loader: 'style?sourceMap!css?importLoaders=1!less?sourceMap!postcss'
        },
        // JSON is not enabled by default in Webpack but both Node and Browserify
        // allow it implicitly so we also enable it.
        {
            test: /\.json$/,
            loader: 'json'
        },
        // "file" loader for svg
        {
            test: /\.svg$/,
            loader: 'file',
            query: {
                name: 'static/media/[name].[hash:8].[ext]'
            }
        }
        // ** STOP ** Are you adding a new loader?
        // Remember to add the new extension(s) to the "url" loader exclusion list.
    ]
},

我的App.js文件

import React, { Component } from 'react';
import logo from '../../public/assets/img/logo.svg';
import './App.less';

class App extends Component {
  render() {
    return (
      <div styleName="App">
        <div styleName="App-header">
          <img src={logo} styleName="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p styleName="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

来自我的package.json

"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
  },
"devDependencies": {
    "autoprefixer": "6.7.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "18.0.0",
    "babel-loader": "6.2.10",
    "babel-plugin-react-css-modules": "^2.6.0",
    "babel-preset-react-app": "^2.2.0",
    "babel-runtime": "^6.20.0",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.1",
    "detect-port": "1.1.0",
    "dotenv": "2.0.0",
    "eslint": "3.16.1",
    "eslint-config-react-app": "^0.6.2",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "4.0.0",
    "eslint-plugin-react": "6.4.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.10.0",
    "fs-extra": "0.30.0",
    "html-webpack-plugin": "2.24.0",
    "http-proxy-middleware": "0.17.3",
    "jest": "18.1.0",
    "json-loader": "0.5.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "object-assign": "4.1.1",
    "postcss-less": "^0.15.0",
    "postcss-loader": "1.2.2",
    "promise": "7.1.1",
    "react-dev-utils": "^0.5.2",
    "style-loader": "^0.16.1",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "2.0.2"
  },

关于我做错了什么的任何想法？谢谢你的帮助！

Answer 1

这里可能的答案，对我来说，修复它的方法是确保我的webpack配置中的context与我的babelrc中的context匹配。

webpack.config.js：

{
...
context: path.join(__dirname, 'app')
}

.babelrc

["react-css-modules", {
  "webpackHotModuleReloading": true,
  "context": "./app" // This is important
}],

babel-plugin-react-css-modules添加类但不转换css

1 个答案: