将gatsby项目从css转换为scss，在丢失网格预处理方面存在问题

我正在采用一个使用迷失网格的gatsby starter项目，并从css转换为scss来获得一些收益。 这是启动项目： https ： //github.com/wpioneer/gatsby-starter-lumen

从本质上讲，我将项目转换为scss，因为我更喜欢它的结构，并希望从所有的css文件中移走。 现在，我简单地说：

• 安装了sass-loader ， scss和node-sass
• 将所有的css文件重命名为scss文件

• 并修改gatsby-node.js到以下内容：

   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 }; 

不幸的是，虽然这允许我使用scss来构build和运行项目，但是我注意到，我的甜蜜丢失的网格已经消失了。 经过调查，我注意到。 lost-column: 1/3在浏览器中仍然是lost-column: 1/3 （例如），所以我可以看到对丢失网格至关重要的预处理没有发生。

老实说，这可能是Lost grid之外的一个问题，而是我如何构buildgatsby-node.js一个问题，但是我希望能够深入了解我所缺less的东西。 一旦解决这个问题，我不介意上传一个scss /丢失的启动项目 。

Answer 1

解决了。

在node_modules/gatsby/dist/utils/webpack.config.js ，我改变了

  // CSS modules config.loader('cssModules', { test: /\.module\.css$/, loaders: ['style', cssModulesConfDev, 'postcss'] }); config.loader('lessModules', { test: /\.module\.less/, loaders: ['style', cssModulesConfDev, 'less'] }); config.loader('sassModules', { test: /\.module\.(sass|scss)/, loaders: ['style', cssModulesConfDev, 'sass'] }); 

至：

  // CSS modules config.loader('lessModules', { test: /\.module\.less/, loaders: ['style', cssModulesConfDev, 'less'] }); config.loader('sassModules', { test: /\.module\.(sass|scss)/, loaders: ['style', cssModulesConfDev, 'sass'] }); config.loader('cssModules', { test: /\.module\.css$/, loaders: ['style', cssModulesConfDev, 'postcss'] }); 

我可能会看到盖茨比人所看到的关于使这种变化永久的东西。