3
我正在使用React,Webpack和Bootstrap-Sass创建客户端应用程序。我试图导入外部引导,萨斯库,但不断收到以下错误在终端:使用webpack导入外部bootstrap-sass库时出错
"File to import not found or unreadable: bootstrap-sass/assets/stylesheets/bootstrap/variables"
看来好像在我webpack.config.js的SCSS装载程序没有被正确读取变量文件引导,青菜;然而,我试过使用/创建几个不同的scss加载器,他们都无法解决这个问题。
这里是我的webpack.config.js文件:
var StaticSiteGeneratorPlugin = require('static-site-generator- webpack-plugin');
var data = require('./data');
var path = require('path');
module.exports = {
entry: './entry.jsx',
output: {
filename: 'bundle.js',
path: __dirname,
libraryTarget: 'umd'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loaders: [ 'css' ] },
{ test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.scss$/, loader: "css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/")},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
},
plugins: [
new StaticSiteGeneratorPlugin('bundle.js', data.routes, data)
],
}
base.scss文件:
// include bootstrap stylesheets
$icon-font-path: "../node_modules/bootstrap- sass/assets/fonts/bootstrap/";
@import "../node_modules/bootstrap- sass/assets/stylesheets/_bootstrap.scss";
@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-compass.scss";
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss";
@import"index.scss";
// include omni stylesheets
@import "../bower_components/omni-bootstrap/assets/stylesheets/omni";
任何帮助或建议,非常感谢!