CSS are not working for me. #1
Comments
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}) It would be very helpful if you can provide a simple test repository |
|
Thanks @edwardfhsiao for the response. I mean on click of Submit button, validations are ignored. I will create a sample repo and share it. |
|
my css already modulized the name, I think the problem you are facing is that you hashed the name again. here is what i did for my project // for node_modules only
{
test: /\.css$/,
include: [PATH.NODE_MODULES_PATH],
// exclude: [PATH.ROOT_PATH],
enforce: 'pre',
enforce: 'post',
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: loader => [
// require("stylelint")({ /* your options */ }),
require('postcss-import')({
root: loader.resourcePath
}),
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
},
// for my project only
{
test: /\.css$/,
include: [PATH.ROOT_PATH],
exclude: [PATH.NODE_MODULES_PATH],
enforce: 'pre',
enforce: 'post',
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: loader => [
// require("stylelint")({ /* your options */ }),
require('postcss-import')({
root: loader.resourcePath
}),
require('autoprefixer')(),
require('cssnano')(),
require('postcss-simple-vars')({
variables: styleVariables
})
]
}
}
]
}, |
|
Thanks!! I feel what you're saying, I'll give this a try. |
|
for the CSS part i am still relying on index html, because now i am facing issue with MiniCss plugin But atleast got the validation working on click of submit buttons and onBlur :) |
|
after adding this in webpack getting the below compilation error Tried to dig in - but unsuccessful |
|
sorry, that was for webpack4 as well.. try this {
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'sass-loader'
}
]
})
},
{
test: /\.css$/,
include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
// ident: 'postcss',
plugins: loader => [
require('postcss-import')({
root: loader.resourcePath
}),
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
})
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
// ident: 'postcss',
plugins: loader => [
require('postcss-import')({
root: loader.resourcePath
}),
require('autoprefixer')(),
require('cssnano')()
]
}
}
]
})
} "extract-text-webpack-plugin": "^3.0.0",
"webpack": "^3.2.0", |
|
closing this issue since no further question |
I tried this but now i'm getting error from bootstrap.css: ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader!./node_modules/bootstrap/dist/css/bootstrap.css) (1:1) Unknown word
|
|
I've never encountered this problem before since I'm not using bootstrap. How about the version of your dependencies? Or could you make a repo that I could take a look? |
Thanks, here is my dependencies : |
|
where is "mini-css-extract-plugin": "^0.4.0", ? "devDependencies": {
"add-asset-html-webpack-plugin": "^3.0.1",
"babel-core": "^6.2.1",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"cssnano": "^3.10.0",
"empty-module": "^0.0.2",
"eslint": "^4.1.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-react": "^7.1.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^4.0.0-alpha.2",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.5.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.6",
"postcss-simple-vars": "^4.1.0",
"sass-loader": "^6.0.2",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"stylelint-config-standard": "^17.0.0",
"uglifyjs-webpack-plugin": "^1.2.2",
"url-loader": "^0.6.2",
"webpack": "^4.19.1",
"webpack-assets-manifest": "^2.0.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.4"
} |
Yes you right, I accidentally copied the wrong file, in any case I copied your dependencies but I still get the same error. |
|
@fordcrees Please create a repo for this then |
Tried to implement the same example here https://edwardfhsiao.github.io/react-inputs-validation/
but css/styles are not working,
also i have a submit button and If i hit submit, without even giving any focus to the text box, it happily goes forward without highlighting that its mandatory. below is the config
validate={true}
validationCallback={ e => this.setState({hasError: e})}
Thanks,
The text was updated successfully, but these errors were encountered: