Mixing
how can I resolve this css class issue in JS project?
0
I am trying to build a single page html app using Javascript. I have the css file in the same folder 'src' along with the index.js file. My webpack.config.js file is as follows:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};Here is my GeometryViewer.module.css file:
.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}When I try to build the project using
npm run buildI am getting this error:
ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdI would appreciate some help in identifying what I could be doing wrong.
javascript html css
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
add a comment |
0
I am trying to build a single page html app using Javascript. I have the css file in the same folder 'src' along with the index.js file. My webpack.config.js file is as follows:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};Here is my GeometryViewer.module.css file:
.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}When I try to build the project using
npm run buildI am getting this error:
ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdI would appreciate some help in identifying what I could be doing wrong.
javascript html css
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
install loader..?npm install --save-dev style-loaderor/andnpm install style-loader css-loader
– Riskbreaker
Nov 20 '18 at 21:02
Can you post./src/GeometryViewer.module.css?
– Phix
Nov 20 '18 at 21:05
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13
add a comment |
0
0
0
I am trying to build a single page html app using Javascript. I have the css file in the same folder 'src' along with the index.js file. My webpack.config.js file is as follows:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};Here is my GeometryViewer.module.css file:
.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}When I try to build the project using
npm run buildI am getting this error:
ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdI would appreciate some help in identifying what I could be doing wrong.
javascript html css
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
I am trying to build a single page html app using Javascript. I have the css file in the same folder 'src' along with the index.js file. My webpack.config.js file is as follows:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};Here is my GeometryViewer.module.css file:
.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}When I try to build the project using
npm run buildI am getting this error:
ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdI would appreciate some help in identifying what I could be doing wrong.
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}npm run buildnpm run buildERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weirdjavascript html css
javascript html css
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
edited Nov 20 '18 at 21:14
Kaushik Mallick
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
asked Nov 20 '18 at 20:51
Kaushik MallickKaushik Mallick
6017
6017
install loader..?npm install --save-dev style-loaderor/andnpm install style-loader css-loader
– Riskbreaker
Nov 20 '18 at 21:02
Can you post./src/GeometryViewer.module.css?
– Phix
Nov 20 '18 at 21:05
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13
add a comment |
install loader..?npm install --save-dev style-loaderor/andnpm install style-loader css-loader
– Riskbreaker
Nov 20 '18 at 21:02
Can you post./src/GeometryViewer.module.css?
– Phix
Nov 20 '18 at 21:05
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13
install loader..?
npm install --save-dev style-loader or/and npm install style-loader css-loader– Riskbreaker
Nov 20 '18 at 21:02
install loader..?
npm install --save-dev style-loader or/and npm install style-loader css-loader– Riskbreaker
Nov 20 '18 at 21:02
Can you post
./src/GeometryViewer.module.css?– Phix
Nov 20 '18 at 21:05
Can you post
./src/GeometryViewer.module.css?– Phix
Nov 20 '18 at 21:05
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13
add a comment |
2 Answers
2
active
oldest
votes
1
The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.
If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
add a comment |
0
I was able to solve my own problem. Here is the revised webpack file that worked:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for.module.cssthat has modules enabled and exclude.module.cssfrom the other loader with modules disabled.
– brianespinosa
Nov 21 '18 at 18:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401321%2fhow-can-i-resolve-this-css-class-issue-in-js-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.
If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
add a comment |
1
The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.
If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
add a comment |
1
1
1
The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.
If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.
If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
answered Nov 20 '18 at 21:14
brianespinosabrianespinosa
1,573716
1,573716
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
add a comment |
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?
– Kaushik Mallick
Nov 20 '18 at 21:19
add a comment |
0
I was able to solve my own problem. Here is the revised webpack file that worked:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for.module.cssthat has modules enabled and exclude.module.cssfrom the other loader with modules disabled.
– brianespinosa
Nov 21 '18 at 18:38
add a comment |
0
I was able to solve my own problem. Here is the revised webpack file that worked:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for.module.cssthat has modules enabled and exclude.module.cssfrom the other loader with modules disabled.
– brianespinosa
Nov 21 '18 at 18:38
add a comment |
0
0
0
I was able to solve my own problem. Here is the revised webpack file that worked:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
I was able to solve my own problem. Here is the revised webpack file that worked:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /.html$/, loader: 'html-loader' },
{
test: [/.js$/, /.jsx$/, /.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader",
},
},
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},
{
test: [/.css/],
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'node_modules/react-toolbox'),
],
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
answered Nov 20 '18 at 22:56
Kaushik MallickKaushik Mallick
6017
6017
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for.module.cssthat has modules enabled and exclude.module.cssfrom the other loader with modules disabled.
– brianespinosa
Nov 21 '18 at 18:38
add a comment |
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for.module.cssthat has modules enabled and exclude.module.cssfrom the other loader with modules disabled.
– brianespinosa
Nov 21 '18 at 18:38
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for
.module.css that has modules enabled and exclude .module.css from the other loader with modules disabled.– brianespinosa
Nov 21 '18 at 18:38
Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for
.module.css that has modules enabled and exclude .module.css from the other loader with modules disabled.– brianespinosa
Nov 21 '18 at 18:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53401321%2fhow-can-i-resolve-this-css-class-issue-in-js-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
install loader..?
npm install --save-dev style-loaderor/andnpm install style-loader css-loader– Riskbreaker
Nov 20 '18 at 21:02
Can you post
./src/GeometryViewer.module.css?– Phix
Nov 20 '18 at 21:05
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet..
– Kaushik Mallick
Nov 20 '18 at 21:13