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

Question

我正在参加一个使用 Lost grid and converting from css to scss for some gains. This is the starter project: https://github.com/wpioneer/gatsby-starter-lumen

的 gatsby 入门项目

基本上，我正在将项目转换为 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 构建和运行项目，但我注意到我可爱的 Lost 网格已经消失了。经过调查，我注意到 .sidebar 仍在浏览器中读取为 lost-column: 1/3（例如），因此我可以看到对于 Lost grid 至关重要的预处理没有发生。

老实说，这可能是 Lost grid 之外的问题，更确切地说是我构建 gatsby-node.js 的方式的问题，但如果能深入了解我所缺少的内容，我将不胜感激。一旦这个问题得到解决，我不介意为 gatsby 上传一个 scss/lost 启动项目。

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']
    });

我可能会看看 gatsby 的人对永久更改的看法。

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

Converting gatsby project from css to scss, having issues with lost grid preprocessing

javascript

css

node.js

postcss

gatsby