After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js:
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}
Additionally, I installed the node-sass package.
Next, I created a .scss file named Test:
.Test {
background-color: gold;
.Header {
color: lighten(purple, 20%);
}
}
I then developed a Test component that imported this .scss file:
import React from 'react';
import style from './test.scss';
const Test = (props) => (
<div className={style.Test}>
This is div1
<div className={style.Header}>Div 2</div>
</div>
);
export default Test;
However, when I tried this approach, the styling did not apply as expected. As an alternative, I attempted importing the .scss directly:
import './test.scss';
...
<div className='Test'>
This is div1
<div className={style.Header}>Div 2</div>
</div>
...
This method seemed to work fine and displayed the styling on the div with the className of 'Test'.
In an effort to tweak the webpack configuration, I made the following adjustments:
const CSSModuleLoader = {
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
localIdentName: '[local]__[hash:base64:5]',
minimize: true
}
}
...
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: ['style-loader', CSSLoader, postCSSLoader, 'sass-loader']
},
{
test: /\.module\.scss$/,
use: [
'style-loader',
CSSModuleLoader,
postCSSLoader,
'sass-loader',
]
},
Initially, I encountered an error stating autoprefixer not defined, which I resolved by importing it with
const autoprefixer = require('style-loader')Subsequently, I faced the following error message:
Invalid configuration object...
At present, I'm unsure how to proceed with resolving this issue...
Looking for guidance on configuring webpack to either compile .scss files to .css directly in the same directory for immediate usage or to utilize .scss imports in the development phase and subsequently compile them to .css for production?