Sapper/Svelte SASS 预处理？

Question

我正在查看Sapper/Svelte的实际应用：https://github.com/sveltejs/realworld。

我已经阅读了很多关于SASS预处理的文章，但似乎它并没有得到完全支持，不过有一些文档可以参考。根据我所了解的，如果我对webpack.client.config.js文件进行以下修改，就可以预处理我的标记：

const svelte = require('rollup-plugin-svelte');
const sass = require('svelte-preprocess-sass').sass;

const config = require('sapper/webpack/config.js');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: config.client.entry(),
    output: config.client.output(),
    resolve: {
        extensions: ['.js', '.html']
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        hydratable: true,
                        emitCss: !config.dev,
                        cascade: false,
                        store: true
                    }
                }
            },
            config.dev && {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            !config.dev && {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{ loader: 'css-loader', options: { sourceMap: config.dev } }]
                })
            }
        ].filter(Boolean)
    },
    plugins: [
    svelte({
      preprocess: {
        style: sass(),
      }
    }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'main',
            async: true,
            children: true
        }),
        config.dev && new webpack.HotModuleReplacementPlugin(),
        !config.dev && new ExtractTextPlugin('main.css'),
        !config.dev && new webpack.optimize.ModuleConcatenationPlugin(),
        !config.dev && new UglifyJSPlugin(),
    ].filter(Boolean),
    devtool: config.dev ? 'inline-source-map' : false
};

我一直遇到以下错误：

node server.js realworldsapper/node_modules/tapable/lib/Tapable.js:375 arguments[i].apply(this);

有什么想法可以解决这个问题吗？

- Justin

Answer 1

你现在混合使用了Rollup和webpack这两个不同的模块打包工具，将rollup-plugin-svelte添加到webpack配置中，而webpack无法对其进行处理，因此会抛出错误。

相反，应该在svelte-loader配置中使用svelte-preprocess-sass。请注意不要移除任何html标签。

use: {
  loader: 'svelte-loader',
  options: {
    hydratable: true,
    emitCss: !config.dev,
    cascade: false,
    store: true,
    style: sass()
  }
}

请注意，style: sass() 这一行将在 svelte-loader 的未来版本中变成 preprocess: { style: sass() } — 请参考这个问题。

顺便提一下，看起来你正在使用较旧的 Sapper 版本 — 最近有一些重大改进，因此升级到 0.9 版本是值得的。不幸的是，这意味着需要对项目结构进行一些更改（请查看迁移指南了解详情，或重新克隆sapper-template并复制您的routes文件夹）。

- Rich Harris

---

啊，我刚刚重新阅读了问题，你正在查看svelte-realworld项目。我们必须将那个更新到最新的Sapper！目前它有点过时和误导性。 - Rich Harris

我实际上尝试了你在这里说的，即使将我的SASS代码包装在<style type="text/scss"></style>中，我仍然会得到解析错误。模块构建失败：错误：ParseError：需要标识符（12:8） 10：flex-wrap：wrap; 11：justify-content：space-between; 12：.product-card { ^ 13： font-size：10px; 14：} 在预处理.then.catch.err (/Users/justin.dasilva/Sites/sapper/node_modules/svelte-loader/index.js:100:12)时 - Justin

如果您更新svelte-realworld项目，那将是非常棒的。我在工作中的团队目前已经分成了4个小组，研究下一个版本项目的不同前端框架。1. 最新的Angular，2. React，3. Vue和4. Sapper（我）。到目前为止，我对Sapper非常热衷。我们项目绝对需要的一件事就是SASS支持，所以我希望在与团队分享之前将其加入我的演示中。 - Justin

也许将所有与SASS相关的文件与HTML文件分开保存更有意义。或者至少支持这个选项。我可以创建一个gulp进程，从SASS文件中创建一个CSS文件，但如果这个gulp进程与热模块重新加载绑定在一起会更好。有没有类似的示例？ - Justin

Answer 2

您需要在每个规则中添加exclude: /node_modules/：

test: /\.css$/, exclude: /node_modules/, // <- 在此处添加

这将确保不会对node_modules文件夹中的任何文件应用转译。

- vibjerg