[英]webpack error: File to import not found or unreadable: bourbon , how to fix?
我正在嘗試在我的 SCSS 文件中加載 Bourbon 包。 我正在使用 Angular 2,這是我的 webpack 3.0 配置:
var path = require("path");
var webpack = require("webpack");
module.exports = {
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.join(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
當我運行 webpack 時,我收到此錯誤:
./node_modules/css-loader!./node_modules/sass-loader!./client/app/app.scss 模塊構建失敗:@import "bourbon"; ^ 要導入的文件未找到或無法讀取:bourbon。 父樣式表:/Users/john/NG6-starter/client/app/app.scss 中的 stdin(第 2 行,第 1 列)@ ./client/app/app.scss 4:14-116 @ ./client/app /app.component.js @ ./client/app/app.js @ multi (webpack)-dev-server/client? http://localhost:9000 ./client/app/app.js webpack: 編譯失敗。
為什么找不到波旁威士忌成分? 這是代碼的鏈接
2021年6月更新: 在版本8.0.0
的開發團隊sass-loader
已決定將所有SASS相關選項的sassOptions
對象中options
:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["node_modules/bourbon/core"],
}
}
}]
}]
}
8.0.0 之前:
您需要將options.includePaths
傳遞給sass-loader
:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["node_modules/bourbon/core"]
}
}]
}]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.