Currently, I am in the process of converting a Gatsby starter project that utilizes Lost grid from CSS to SCSS for better organization and efficiency. The original starter project can be found here: https://github.com/wpioneer/gatsby-starter-lumen
The main reason behind this conversion is my preference for the structure of SCSS over traditional CSS files. So far, I have:
- Installed
sass-loader,scss, andnode-sass - Renamed all CSS files to SCSS files
Adjusted
gatsby-node.jsas follows:var rucksack = require('rucksack-css') var lost = require("lost") var cssnext = require("postcss-cssnext") exports.modifyWebpackConfig = function(config, env) { config.merge({ postcss: [ lost(), rucksack(), cssnext({ browsers: ['>1%', 'last 2 versions'] }) ] }) config.loader('svg', { test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }) config.loader('sass', { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader', }) return config };
However, despite successfully building and running the project using SCSS, I've encountered an issue where my Lost grid seems to be missing. Upon investigation, I noticed that elements like .sidebar are still displaying styles such as lost-column: 1/3 in the browser, indicating that the necessary preprocessing for Lost grid has not taken place. It appears to be more of a configuration issue with how I've set up the gatsby-node.js.
I suspect the problem lies beyond Lost grid itself, and could be related to my implementation within gatsby-node.js. Any insights or guidance on resolving this issue would be greatly appreciated. Once resolved, I plan to share a SCSS/Lost grid starter project for Gatsby. Thank you.