0
混入我想用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>
)
我得到這些錯誤通知我變量和混入沒有定義:
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
內聯型裝載機是使用了錯誤的事情看,其轉換的樣式與使用DOM元素,然後我必須將其轉換爲JavaScript對象。我想了解我如何從twitter bootstrap這樣的東西中拿出更少的/ sass,並將它編譯成與鐳一起使用。鐳加載器爲我引發一個錯誤。 – vamsiampolu