After diving into a React project built with redux-easy-boilerplate (https://github.com/anorudes/redux-easy-boilerplate/tree/master/src), I found the structure of individual SCSS files for each component quite appealing. As I migrate an older app that uses LESS for styling, I aim to repurpose its styles within this new project.
My attempt to simply swap out SCSS with LESS in the boilerplate has hit a snag that leaves me puzzled. Looking at a standard component like this one: https://github.com/anorudes/redux-easy-boilerplate/tree/master/src/components/Footer, we see it contains a styles directory housing two files -
index.js:</p>
<pre><code>import 'style!./styles.scss';
export default require('./styles.scss').locals.styles;
and a styles.scss file structured as follows:
:local(.styles) {
text-align: center;
padding: 70px 0 40px;
...
}
Renaming the .scss file to .less triggers an error indicating an inability to access the 'styles' property (referencing locals) on the second line of index.js. Lack of familiarity with SCSS makes it challenging to comprehend the purpose of the initial line in the SCSS file and identify an equivalent in LESS syntax.
Furthermore, I confirmed the addition of the LESS loader to the webpack configuration:
{
test: /\.less$/,
loader: 'style!css!less',
},