github docs之后,我尝试了以下内容在我的应用中包含scss资源:

应用程序/ JavaScript的/风格/ app.scss:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  margin: 0;
}

应用程序/ JavaScript的/包/ application.js中:

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

import React from 'react';

import '../styles/app.scss'

我的 webpack.config.js 是rails上的默认webpack安装 . 它是这两个目录的组合:

我可以在 config/loaders/sass.js 中找到CSS配置:

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { env } = require('../configuration.js')

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

执行此操作时,我没有收到任何错误,但未导入样式表 . 从资产管道提供相同的文件工作正常 .