npm - Sapper/Svelte SASS 预处理？

所以我正在检查 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
};

我不断收到以下错误:



有想法该怎么解决这个吗？

最佳答案

您正在混合和匹配 Rollup 和 webpack，它们是两个不同的模块打包器——您将 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 文件夹)。

关于npm - Sapper/Svelte SASS 预处理？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49266016/