Menu
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";
}
582
First, SCSS is converted to CSS ( sass-loader ), then run through css-loader to process @import() , url() etc, then style-loader (to be appended to the DOM) or Mini CSS Extract Plugin to externalise the CSS when doing a production build.
javascript - Webpack compile scss to css and minify - Stack Overflow. Stack Overflow for Teams – Start collaborating and sharing organizational knowledge.
scss file. You can also import CSS files. The @import directive imports the file and any variables or mixins defined in the imported file can then be used in the main file.
Fundamentally both rules do the same thing - load members inside another module. The main differences is how they handle members. @import makes everything globally accessible in the target file.
./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
67
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
