如何配置webpack以在我的项目中使用指南针

Question

我是webpack的新手,我不知道如何在项目中使用Compass(CSS Authoring Framework).

有一个好方法吗？

谢谢

Answer 1

你可以使用指南针混合

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

这是一个有用的webpack样板文件

更新:

您可以使用sass-resources-loader将@Smport资源导入每个必需的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')

请检查此样板中的实施情况