css - 如何配置 webpack 在我的元素中使用 compass

Question

我是 webpack 的新手，我不知道如何在元素中使用 Compass(CSS 创作框架)。

有什么好的方法吗？

谢谢

Answer 1

你可以使用compass-mixins

var path = require('path');
module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")
      }
    ]
  }
};

这是一个helpful webpack boilerplate

更新:

您可以使用 sass-resources-loader这会将您的 SASS 资源 @import 到每个必需的 SASS 模块中。您永远不必在所有 sass 文件中导入资源。

module.exports = {
  ...,
  module: {
    loaders: [
      ...,
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css',
          'sass?outputStyle=expanded&includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib'),
          'sass-resources'
        ]
      }
    ]
  },
  sassResources: path.resolve(__dirname, './client/app/resources/stylesheets/base.scss')

请检查执行in action in this boilerplate