2016-05-24 24 views
0

混入我想用twitter-bootstrapinline-styles,爲了做到這一點,我已經安裝:無法加載變量或使用內嵌式裝載機

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

我一直在使用NPM安裝bootstrap-sassradium。我寫了這個代碼:

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 

回答

0

確保您將@import引導到您需要mixins的scss文件中。使用同構風格,你永遠不知道你的入口點是什麼,所以它不像你在一個地方使用它,忘記它。

嘗試導入這樣的:

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

~字符會告訴的WebPack在modulesDirectories解析器(See more

+0

內聯型裝載機是使用了錯誤的事情看,其轉換的樣式與使用DOM元素,然後我必須將其轉換爲JavaScript對象。我想了解我如何從twitter bootstrap這樣的東西中拿出更少的/ sass,並將它編譯成與鐳一起使用。鐳加載器爲我引發一個錯誤。 – vamsiampolu

相關問題