[英]Could not resolve styleName
I'm using scss modules in my react app but every time I change a styleName
, I get the error Could not resolve styleName
during hot reloading.我在我的 React 应用程序中使用 scss 模块,但每次更改
styleName
,都会收到错误消息:在热重载期间Could not resolve styleName
。 If I don't have any corresponding styles for the styleName
, I get the error as well.如果
styleName
没有任何相应的样式,我也会收到错误消息。 I have to restart my server every time to recompile.我每次都必须重新启动服务器才能重新编译。 Is there anything wrong with my config?
我的配置有问题吗?
webpack.dev.js webpack.dev.js
const webpack = require('webpack')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = require('./webpack.base')({
mode: 'development',
devServer: {
hot: true,
port: 3000,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new BrowserSyncPlugin(
{ proxy: 'http://localhost:3000/', open: false },
{ reload: false }
)
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
[
'react-css-modules',
{
"filetypes": {
".scss": { "syntax": "postcss-scss" }
},
"generateScopedName": '[name]_[local]_[hash:base64:5]'
}
],
],
},
},
resolve: {
extensions: ['.js', '.jsx']
}
},
{
test: /\.(sa|sc)ss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: false,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
]
}
})
example.scss例子.scss
.header-container {
font-size: 14px;
}
.release-index {
width: 5%;
}
Do you have postcss-scss
installed and put a config like this plugins option ?您是否安装了
postcss-scss
并放置了像这个插件选项这样的配置?
['react-css-modules', {
filetypes: {
'.scss': {
syntax: 'postcss-scss'
}
}
}
]
You have to install postcss-import-sync2 and import it as the first plugin like below (configuring babel-plugin-react-css-modules ).您必须安装postcss-import-sync2并将其作为第一个插件导入,如下所示(配置babel-plugin-react-css-modules )。
Maybe newer postcss-import would also work here but it doesn't have sync mode and postcss-import-sync2 is also used in README.md也许较新的postcss-import也可以在这里工作,但它没有同步模式,并且postcss-import-sync2也在README.md中使用
Custom resolve function is required if you'd like to support importing sass partials _my-partial.scss like @import './my-partial';.如果您想支持导入 sass 部分 _my-partial.scss 就像 @import './my-partial'; ,则需要自定义解析函数。
const path = require('path');
// Later configuring plugin...
{
filetypes: {
".scss": {
syntax: "postcss-scss",
plugins: [
[
"postcss-import-sync2",
{
resolve: function(id, basedir, importOptions) {
let nextId = id;
if (id.substr(0, 2) === "./") {
nextId = id.replace("./", "");
}
if (nextId[0] !== "_") {
nextId = `_${nextId}`;
}
if (nextId.indexOf(".scss") === -1) {
nextId = `${nextId}.scss`;
}
return path.resolve(basedir, nextId);
}
}
],
[
"postcss-nested",
{
bubble: ["@include"],
preserveEmpty: true
}
]
]
}
},
generateScopedName: "[path]___[name]__[local]___[hash:base64:5]",
webpackHotModuleReloading: true,
exclude: "node_modules",
handleMissingStyleName: "warn"
}
styles.scss :样式.scss :
@import './example';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.