css loader invalid options in stylesOverlay.js #236
Description
Hello.
When using "import './styles.scss'" in component, build fails with error:
ERROR in ./src/components/HeaderNewsLine/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js!./src/components/HeaderNewsLine/styles.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'localIdentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
at validate (/Users/user/Documents/fabric-ui/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:49:11)
at Object.loader (/Users/user/Documents/fabric-ui/node_modules/css-loader/dist/index.js:34:28)
@ ./src/components/HeaderNewsLine/styles.scss 1:14-201
@ ./src/components/HeaderNewsLine/index.tsx
@ ./src/App.tsx
@ ./src/index.tsx
Component (imported in App.tsx):
import React from "react";
import "./styles.scss";
export default function() {
return <div className="news-header"></div>;
}
Styles file:
.news-header {
position: absolute;
width: 1280px;
height: 30px;
left: 0px;
top: 0px;
background: #000000;
}
package.json contents:
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"office-ui-fabric-react": "^7.0.0"
},
"devDependencies": {
"css-loader": "^3.2.0",
"just-scripts": "^0.27.0",
"just-stack-react": "^1.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.3"
}
When I comment out line "localIdentName.." in styles overlay all works:
createStyleLoaderRule({
modules: true,
// localIdentName: options.localIdentName || defaultIdentName
})
I believe localIdentName property should be in nested object, like this (from https://github.com/webpack-contrib/css-loader):
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[path][name]__[local]--[hash:base64:5]',
context: path.resolve(__dirname, 'src'),
hashPrefix: 'my-custom-hash',
},
},
},
],
},
};