Rollup.js中包含了material-ui layout-grid组件的构建错误。

Question

在 "Svelte Material UI "包的帮助下，我将Material UI集成到了我的Svelte项目中，但它不包含Material layout-grid组件。但是它不包含Material layout-grid组件。我单独安装了它，使用 yarn add "@material/layout-grid" 命令。

但现在我在构建过程中出现了错误。

[!] (plugin postcss) Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
node_modules/@material/layout-grid/mdc-layout-grid.scss
Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
    at options.error (/media/hdd-home/d/WebServers/home/spadmin.org/public_html/todoapp/node_modules/node-sass/lib/index.js:291:26)

所以，我放弃了自己解决它。

该项目 软件包.json:

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv ."
  },
  "devDependencies": {
    "@mdi/js": "^5.3.45",
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@smui/button": "^1.0.0-beta.21",
    "@smui/card": "^1.0.0-beta.21",
    "@smui/checkbox": "^1.0.0-beta.21",
    "@smui/chips": "^1.0.0-beta.21",
    "@smui/common": "^1.0.0-beta.21",
    "@smui/form-field": "^1.0.0-beta.21",
    "@smui/linear-progress": "^1.0.0-beta.21",
    "@smui/textfield": "^1.0.0-beta.21",
    "@smui/top-app-bar": "^1.0.0-beta.21",
    "material": "^0.4.3",
    "node-sass": "^4.14.1",
    "rollup": "^2.3.4",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-postcss": "^3.1.1",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.7.4"
  },
  "dependencies": {
    "@material/layout-grid": "^6.0.0",
    "sirv-cli": "^0.4.4"
  }
}

这里是 滚动.配置.js

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import livereload from 'rollup-plugin-livereload';
import {terser} from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;


export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'scripts/app.js',
  },
  plugins: [
    copy({
      targets: [
        {src: 'src/index.html', dest: '.'},
      ],
    }),
    svelte({
      dev: !production,
      emitCss: true,
      css: css => {
        css.write('css/app.css');
      },
      preprocess: autoPreprocess()
    }),
    resolve({
      browser: true,
      dedupe: ['svelte', '@material'],
    }),
    commonjs(),
    postcss({
      extract: 'css/app.css',
      minimize: true,
      sourceMap: true,
      use: [
        [
          'sass', {
          includePaths: [
            './theme',
            './node_modules',
          ],
        },
        ],
      ],
    }),

    !production && serve(),
    !production && livereload({watch: ['scripts', 'css', 'src', 'theme']}),
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

function serve() {
  let started = false;

  return {
    writeBundle() {
      if (!started) {
        started = true;

        require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true,
        });
      }
    },
  };
}

Answer 1

很明显，它试图解析"@material... scss 归档 css. 所以可能错过了编译步骤。我在你的网站上找不到scss rollup插件 package.json.

检查这个，它可以解决你的问题。https:/www.npmjs.compackagerollup-plugin-scss