1

我正在采用一个 gatsby 入门项目，该项目使用Lost grid并从 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 构建和运行项目，但我注意到我可爱的 ​​Lost 网格已经消失了。经过调查，我注意到它.sidebar仍在lost-column: 1/3浏览器中读取（例如），所以我可以看到对丢失网格至关重要的预处理没有发生。

老实说，这可能是 Lost 网格之外的问题，而是我如何构建的问题gatsby-node.js，但我希望能深入了解我所缺少的内容。解决此问题后，我不介意为 gatsby 上传scss/lost 入门项目。

4

1 回答 1

0

解决了。

中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 的人们对永久更改的看法。

于 2017-01-24T08:08:37.187 回答