css - Brunch 没有按预期获取供应商 CSS

Question

我正在尝试使用 Pure.css在我的申请中。我已经使用 npm 安装了它并且有我的 brunch-config.js像这样配置:

stylesheets: {
  joinTo: {
    'app.css': /^app/,
    'vendor.css': /^(?!app)/
  }
}

我希望 vendor.css在这一点上生成，但事实并非如此。但是，如果在我的 JavaScript 中，我说 require('purecss'); ，然后我得到vendor.css生成...但我也收到 JavaScript 错误 Cannot find module 'purecss' from '<filename>' .我还尝试了 @import 'purecss' 的各种排列在我的 CSS 中没有成功。

如何使用 npm 模块中的供应商 CSS？

Answer 1

你应该使用npm config section ，例如，当我想包含 node_modules/bootstrap/dist/css/bootstrap.css 时，我必须将以下内容放入我的 brunch-config.js:

npm: {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

这与您在 files 中的部分相结合，使其将 Bootstrap 的 css 写入 vendor.css。

---

适合我的完整 brunch-config.js:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'app.js': /^app/,
        'vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'app.css': /^app/,
        'vendor.css': /^(?!app)/
      }
    }
  },

  plugins: {
    babel: { presets: ['es2015'] }
  },

  npm: {
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};