无法使用内联样式加载器加载变量或混合

Question

我想在inline-styles中使用twitter-bootstrap，为此，我进行了以下设置：

{
   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>
)

我收到以下错误，通知我没有定义变量和混合：

 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

Answer 1

确保将bootstrap @import到需要混合的scss文件中。对于同构的样式，你永远不会知道你的入口点可能是什么，所以你不会在一个地方使用它，然后忘记它。

尝试像这样导入：

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

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