I'm learning about CSS Modules at the moment, and they look like they will solve a lot of problems. But all the documentation is based on CSS, I want to use SASS.
Is this possible? For example, how could I make the following statement work?
.normal {
composes: common;
composes: primary from "../shared/colors.scss";
}
./scss/import.scss
.myImportClass {
background-color: #f00
}
./scss/style.scss
.btn {
padding: 20px;
border: 1px solid #000;
}
.newBtn {
composes: btn;
composes: myImportClass from './import.scss';
border: 5px solid #f00;
}
module part in your webpack.config.js
module: {
rules: [
{
test: /\.scss/,
use: [
{
loader:'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
}
]
}
Your teststyle.js (ES6 / ES7):
import React from 'react';
import style from './scss/style.scss';
const TestStyle = () => {
render() {
return (<div>
<button className={style.newBtn}>my button</button>
</div>)
}
}
default export TestStyle;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack CSS composes</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
entry point app.js
import React from 'react';
import TestStyle from './teststyle';
React.render(
<TestStyle />,
document.getElementById('app')
);
// UPDATE
convert webpack config to webpack 3
make teststyle.js a stateless function
it's a problem of css-loader, try to add the option importLoaders: 1, in css-loader webpack config (https://webpack.js.org/loaders/css-loader/#importloaders)
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
},
}
Related
I have the following Test component:
Test.css
.SomeClass {
background-color: blue;
width: 100px;
height: 100px;
}
Test.tsx
import React from 'react';
import './Test.css';
export const Test = () => {
return (
<div className={'SomeClass'}>
hello
</div>
);
};
Relevant section of webpack config:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
modules: {
localIdentName: '[local]',
},
},
}],
},
The problem is that the styles are not applied. On inspection, the div looks like this:
<div class="SomeClass">hello</div>
but there is no "SomeClass" css.
I suspect it is to do with some webpack config. I tried this too: use: ['style-loader', 'css-loader'] instead of the above use array, but no luck.
Edit
This project uses react-jss.
Does tailwind compatible with javascript codes because every time when I use it doesn't work.
Example code:
<div class="slides"
data-0="transform translate-x-0 translate-y-0"
data-100p="transform translate-x-0 translate-y-1/2"
data-200p="transform translate-x-1/2 translate-y-1/2"
data-300ps="transform translate-x-1/2
>
...
</div>
skrollr.js
<script src="/home/isswarya/skrollr.min.js"></script>
<script type="text/javascript">var s = skrollr.init();
</script>
Yes Tailwind CSS is compatible with javascript code. By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations.
// Example `tailwind.config.js` file
module.exports = {
important: true,
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
extend: {
colors: {
cyan: '#9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}
}
You can see Tailwind CSS Configuration
I have the entry component in reactjs:
import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
I am trying to style in the root element inside of my css file, index.css:
#root {
background-color: brown;
height:100vh;
width:100vh;
}
The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.
This is my webpack config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ['css-loader'],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
It is as if it is not loading the index.css file at all.
You cannot style the #root of your app. Just style the className of <App /> component, for example:
const App = () => (
<div className="app>
// ...
</div>
)
css file:
.app {
background-color: #ffffff;
background-color: brown;
height:100vh;
width:100vh;
}
When using webpack, i think you have to specify your entry points of your css/js files like this...
entry: [
"./src/js/index.js",
"./src/sass/style.scss",
],
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'assets/js')
},
module: {
rules: [
/* you code here */
...
...
I used create-react-app to create a very simple app. But the css is not working for me. Here's my code
# Test.css
.h1 {
color: white;
}
# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';
class Test extends Component {
render() {
return (
<div>
<h1 className={styles.h1}>Test!</h1>
</div>
)
}
}
export default Test;
The color of my h1 is still black not white. Any help will be appreciated!
# Test.css
.h1 {
color: white;
}
# Test.jsx
import React, { Component } from 'react';
import styles from './Test.css';
class Test extends Component {
render() {
return (
<div>
<h1 className={styles.h1}>Test!</h1>
</div>
)
}
}
export default Test;
In the project that I’m adding CSS Modules to we already have one loader defined for our JavaScript:
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}`enter code here`
}
webpack config
{
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
I am using css-loader and style-loader for my CSS but all media queries are not working. I am using "webpack": "^3.4.1", "css-loader": "^0.28.4" and "style-loader": "^0.18.2".
This is my Webpack configuration:
const ExtractTextPlugin = require('extract-text-webpack-plugin')
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]-[local]-[hash:base64:6]',
camelCase: true
}
}]
}]
...
plugins: [
new ExtractTextPlugin({
filename: 'style.[chunkhash:6].css',
allChunks: true
})
]
My css file is something like this:
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media (max-width: 768px) {
.container{
background: #fbfbfb;
}
}
and I am importing this CSS file in React code like this:
import styles from './Component.css'
try use this code
.container{
position: relative;
margin: 30px 15px;
padding: 50px 15px;
background: #fff;
}
#media only screen and (max-width:768px){
.container{
background: #c00;
}
}
<div class="container">
content her
</div>
I think that the problem is that you declared the ExtractTextPlugin, but you are using css and style loader instead.
Take a look at this setup for reference:
plugins
plugins: [
new ExtractTextPlugin({
filename: "css/bundle.css",
allChunks: true,
disable: process.env.NODE_ENV !== 'production'
}),
]
loader
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?importLoaders=1'
})
}
This would use ExtractTextPlugin with production builds, and fallback to style-loader when using webpack-dev-server because ETP doesn't support hot reloading.
Feels so silly that I wasted as much time as I did, not getting why I was facing this same issue.
Just wanted to include it here for anyone else's reference as well...
Note, There could be other reasons for this issue as well.
My issue was that I hadn't added the meta tag w/ viewport.
FYR -
<meta name="viewport" content="width=device-width, initial-scale=1" />
Hope this helps.