我有我的scss文件,该文件导入了一个scss文件,该文件进一步导入了波旁威士忌和波旁威士忌。我什至在论坛上搜索了各种问题,但没有找到问题,该问题是在从scsss到css的转换中,案例包括波旁威士忌。
webpack 4.28.1 mini-css-extract-plugin 0.5.0
我看到以下错误:
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js??ref--5-2!src/component/styles/main.scss:enter code here
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/component/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss 373 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./src/component/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
var path = require('path');
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in /Users/../node_modules/bourbon/index.js (line 1, column 1)
我的webpack.config.js文件在这里
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
"app": ['whatwg-fetch',"./src/component/index.ts", "./src/component/styles/main.scss"],
"app-helper": "./src/component/helpers.ts"
},
output: {
path: path.resolve(__dirname, './src/component/dist'),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",// compiles Sass to CSS
options: {
includePaths: [
'node_modules/bourbon/app/assets/stylesheets',
'node_modules/bourbon-neat/app/assets/stylesheets'
]
}
}
],
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './src/component/dist/output-style.css',
})
],
optimization: {
minimizer:[
new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
}
}
请提供您的宝贵建议。
答案 0 :(得分:2)
事实证明这是sass-loader版本7.x的问题。我将sass-loader的依赖关系更改回6.0.7,它开始像魅力一样工作。这是帮助了
的stackoverflow线程