Sass 编译器 Phoenix 框架

Question

我是前端 Phoenix 框架的新手，正在尝试实现 Sass，但是“priv/static/css/app.css”没有使用“web/static/css/app.scss”进行编译。我的 app.css.map 文件如下所示：

{"version":3,"sources":"web/static/css/app.scss","names":[],"mappings":"","file":"priv/static/css/app.css"}

我的 brunch.config 文件如下所示：

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    scripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // https://github.com/brunch/brunch/blob/stable/docs/config.md#files
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // https://github.com/brunch/brunch/tree/master/docs#concatenation
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
    sass: {
      options: {
        includePaths: ['web/static/vendor/bootstrap-sass/assets/stylesheets']
      }
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    // Whitelist the npm deps to be pulled in as front-end assets.
    // All other deps in package. will be excluded from the bundle.
    whitelist: ["phoenix", "phoenix_html"]
  }
};

我在运行 node_modules/brunch/bin/brunch build 时也遇到错误：

25 Apr 09:06:33 - error: Initialization error - SyntaxError: Unexpected identifier
  at exports.runInThisContext (vm.js:53:16)
  at Module._compile (module.js:387:25)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (/Users/dara.carolan/Sites/tomcat/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:314:12)
  at Module.require (module.js:367:17)
  at require (internal/module.js:20:19)
  at Promise.then.config (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:458:18)
  at Object.keys.forEach.environments.forEach.Object.keys.map.exports.install.exports.replaceConfigSlashes.Object.keys.forEach.types.map.type.map.joinTo.map.types.forEach.exports.setConfigDefaults.Object.keys.forEach.normalized.paths.possibleConfigFiles.Object.keys.map.readComponents.then.Promise.then.obj.catch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:450:10)
  at Object.keys.forEach.environments.forEach.Object.keys.map.exports.install.exports.replaceConfigSlashes.Object.keys.forEach.types.map.type.map.joinTo.map.types.forEach.exports.setConfigDefaults.Object.keys.forEach.normalized.paths.possibleConfigFiles.Object.keys.map.readComponents.then.Promise.then.exports.loadConfig.tryToLoad.then.config.then.then.then.config.then [as loadConfig] (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:496:10)
  at new BrunchWatcher (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/watch.js:75:17)
  at Promise.all.then.setProp.constructor.application.loadConfig.then.then.initCompilation.initWatcher.chokidar.watch.on.on.absPath.on.compile.assetErrors.forEach.Promise.all.then.then.watch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/watch.js:341:10)
  at exports.new.start (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/index.js:27:10)
  at Command.listener (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:301:8)
  at emitTwo (events.js:100:13)
  at Command.emit (events.js:185:7)
  at Command.parseArgs (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:615:12)
  at Command.parse (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:458:21)
  at Object.keys.forEach.exports.run (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/cli.js:73:11)
  at loadBrunch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/bin/brunch:34:7)
  at /Users/dara.carolan/Sites/tomcat/node_modules/brunch/bin/brunch:44:5
  at FSReqWrap.oncomplete (fs.js:82:15)

我是凤凰城的新手，如果我犯了一个愚蠢的错误，我深表歉意，任何建议都会很棒，谢谢！

Answer 1

可能检查您的文件/Users/dara.carolan/Sites/tomcat/node_modules/coffee-script/lib/coffee-script/register.js，它似乎格式错误:)

Answer 2

在 Phoenix 1.4 中，sass 是使用 webpack 实现的，如 here 所述。

1. 在你的 npm 项目中安装 node-sass 和 sass-loader
2. 更新 webpack 配置中的加载器：{test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]}
3. 将app.css 重命名为app.scss
4. 将app.js 中的导入更新为import css from "../css/app.scss"