Question

我尝试创建一个简单的汇总应用程序的配置，并在css上遇到一些麻烦。

这是我的css文件：

@import "normalize.css";
@import "typeface-roboto";

html, body, #root {
  height: 100%;
  font-family: Roboto, serif;
}

body {
  background: url('./images/background.jpg');
}

我所拥有的是关于未找到资源的3个错误。

这是我的配置文件：

import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import replace from 'rollup-plugin-replace'
import postcss from 'rollup-plugin-postcss'
import html from 'rollup-plugin-fill-html'
import url from "rollup-plugin-url"

process.env.NODE_ENV = 'development'

const CWD = process.cwd()
const Paths = {
  SRC: `${CWD}/src`,
  DIST: `${CWD}/dist-rollup`,
  NODE_MODULES: `${CWD}/node_modules`
}
Object.assign(Paths, {
  INPUT: Paths.SRC + '/index.js',
  OUTPUT: Paths.DIST + '/index.js'
})


export default {
  input: Paths.INPUT,
  output: {
    file: Paths.OUTPUT,
    format: 'iife', // immediately-invoked function expression — suitable for <script> tags
    // sourcemap: true
  },
  plugins: [
    html({
      template: `${Paths.SRC}/template.html`,
      filename: 'index.html'
    }),
    postcss({
      modules: true,
      plugins: [
      ]
    }),
    url({
      limit: 10 * 1024, // inline files < 10k, copy files > 10k
    }),
    resolve(), // tells Rollup how to find date-fns in node_modules
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(), // converts date-fns to ES modules
    replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ]
}

我尝试使用rollup-plugin-rebase和postcss-assets这样的插件，但不幸的是，它对我没用。

Answer 1

我发现css-import运作良好，NPM软件包提供了一个cssimport命令行界面，该界面接受一个主CSS文件，该文件包含@import语句和目录中的可选目录搜索CSS；它将输出的stdout合并的CSS写入单个文件。

我使用以下命令在我的main.css目录中输出单个build文件，在node_modules下搜索导入的文件：

cssimport main.css ./node_modules/ > ./build/main.css

使用汇总时，您可以使用rollup-plugin-execute plugin来执行shell命令，作为汇总构建过程的一部分。例如：

    plugins: [
      ...
      execute('npx cssimport main.css ./node_modules/ > build/main.css')
    ]

Answer 2

也许我选择的不是常用方式，但对我来说单一工作的解决方案是使用带有2个插件的postcss：postcss-imports用于@import语法，postcss-url用于url。

但也有困难。 Postcss-url不想像我期望的那样只是工作。我不得不使用这个插件的3个实例：

{{1}}

您可能会在https://github.com/schuhschuh/cmake-basis-modules/blob/develop/FindTBB.cmake

上看到它

当然，如果您知道，我会很高兴看到更简单的解决方案，请与我分享。

如何在汇总中使用css @import？

2 个答案: