npm - 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);

关于如何解决这个问题有什么想法吗？

Answer 1

您正在混合和匹配 Rollup 和 webpack，这是两个不同的模块 bundler - 您正在将 rollup-plugin-svelte 添加到 webpack 配置中，而 webpack 不知道如何处理它，因此会抛出错误.

相反，在 svelte-loader 配置中使用 svelte-preprocess-sass :

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

(请注意，在 svelte-loader 的 future 版本中，style: sass() 行将变为 preprocess: { style: sass() } — 请参阅 this issue ) .

顺便说一下，您似乎使用的是较旧版本的 Sapper — 最近有一些重大改进，因此值得升级到 0.9。不幸的是，这确实意味着对您的项目结构进行一些更改(有关详细信息，请参阅 migration guide，或重新克隆 sapper-template 并复制您的 routes 文件夹)。