无法使用 inline-style-loader 加载变量或 mixins答案

【问题标题】：Cannot load variables or mixins using inline-style-loader无法使用 inline-style-loader 加载变量或 mixins
【发布时间】：2016-09-22 07:26:40
【问题描述】：

我想将twitter-bootstrap 与inline-styles 一起使用，为此，我进行了设置：

{
   test: /\.scss$/,
   loaders: ['raw', 'inline-style', 'autoprefixer?' + autoprefixerOptions, 'sass']
}

我已经使用 npm 安装了 bootstrap-sass 和 radium。我写了这段代码：

import normalize from 'radium-normalize'
import m from '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss'
import v from '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss'
import sc from '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss'
import t from '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss'
import buttons from '..//node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss'

我尝试将这些添加到radium 提供的Style 组件中，如下所示：

const baseRules = {...normalize, ...m, ...v, ...sc, ...type}
const App = () => (
  <div>
    <Style rules={baseRules} />
    <HelloWorld />
  </div>
)

我收到这些错误消息，通知我未定义变量和 mixin：

 ERROR in ./~/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss
Module build failed: 
  @include box-sizing(border-box);
          ^
      No mixin named box-sizing

Backtrace:
    stdin:12
      in /home/vamsi/Do/webpack-npm-plugin/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss (line 12, column 12)
 @ ./src/index.js 21:19-107

ERROR in ./~/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss
Module build failed: 
  font-family: $headings-font-family;
              ^
      Undefined variable: "$headings-font-family".
      in /home/vamsi/Do/webpack-npm-plugin/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss (line 11, column 16)
 @ ./src/index.js 25:12-93

ERROR in ./~/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss
Module build failed: 
  font-weight: $btn-font-weight;
              ^
      Undefined variable: "$btn-font-weight".
      in /home/vamsi/Do/webpack-npm-plugin/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss (line 12, column 16)
 @ ./src/index.js 29:15-100

【问题讨论】：

标签： twitter-bootstrap reactjs sass webpack inline-styles

【解决方案1】：

确保你 @import 引导到你需要 mixins 的 scss 文件。对于同构样式，您永远不知道您的入口点可能是什么，因此您不会在一个地方使用它而忘记它。

尝试像这样导入：

   @import "~/bootstrap-sass/assets/stylesheets/bootstrap/mixins"

~ 字符会告诉 webpack 查看 modulesDirectories 解析器 (See more)

【讨论】：

内联样式加载器是错误的使用方式，它转换样式以用于 dom 元素，然后我必须将其转换为 javascript 对象。我想了解如何从 twitter bootstrap 之类的东西中获取 less/sass 并编译它以与镭一起使用。镭加载器为我抛出了一个错误。