我正在尝试将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.
]
},
和我的应用程序.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;
从我的包.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"
},
对我做错了什么有什么想法吗？感谢您的任何帮助！
在这里可能的答案，对我来说，修复它的方法是确保我的 webpack 配置中的context与我在 babelrc 中的context相匹配。
webpack.config.js：
{
...
context: path.join(__dirname, 'app')
}
.babelrc
["react-css-modules", {
"webpackHotModuleReloading": true,
"context": "./app" // This is important
}],