Javascript 网页包错误:要导入的文件找不到或无法读取:bourbon,如何修复?
我正在尝试将Bourbon软件包加载到我的SCSS文件中。我正在使用Angular 2,这是我的网页3.0配置:Javascript 网页包错误:要导入的文件找不到或无法读取:bourbon,如何修复?,javascript,angular,webpack-2,webpack-3,Javascript,Angular,Webpack 2,Webpack 3,我正在尝试将Bourbon软件包加载到我的SCSS文件中。我正在使用Angular 2,这是我的网页3.0配置: var path = require("path"); var webpack = require("webpack"); module.exports = { devServer: { contentBase: path.join(__dirname, "build"), compress: true, port: 9000 }, node:
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_模块/css加载器/节点\模块/sass加载器/client/app/app.scss
模块构建失败:@import“bourbon”^
要导入的文件找不到或不可读:bourbon。父样式表:stdin
在/Users/john/NG6 starter/client/app/app.scss(第2行第1列)@./client/app/app.scss 4:14-116@./client/app/app.component.js
@./client/app/app.js@multi
(网页包)-开发服务器/客户端/client/app/app.js
网页包:未能编译
为什么找不到波旁威士忌成分?以下是2021年6月更新的链接: 8.0.0之前: 您需要将
选项传递给sass加载器。includePath
:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["node_modules/bourbon/core"]
}
}]
}]
}
似乎您缺少了sassOptions
对象(可能是对较新版本的更改):{loader:“sass-loader”,选项:{sassOptions:{includePaths:[“absolute/path/a”,“absolute/path/b”],},},},},}
Docs:感谢您指出,似乎sass-loader开发人员用v8.0.0改变了这一点。更新了答案。
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["node_modules/bourbon/core"]
}
}]
}]
}