javascript - Webpack 4从scss中提取css而不是从编译文件中删除sass文件
问题描述
在在这里写这个问题之前,我已经经历了很多关于 stackoverflow 和文章的问题。我成功地使用 webpack4 创建了 CSS 文件 sass。
我有如下client.js的文件,它导入scss
import React , { Component } from 'react'
import { connect } from 'react-redux';
import './jobcard.scss';
这是我的 webpack 配置。
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
client: './src/client.js',
},
output: {
path: path.resolve(__dirname, 'asset'),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css',
})
]
}
它成功创建了 main.css 并存储在“/asset”文件夹中。但问题是当我使用 babel 编译 client.js 时。它低于线。
require("./jobcard.scss");
由于上面的行,它的中断是因为在 dist 文件夹中没有这样的 scss 文件,因为它被提取并放置在“asset”文件夹中。我希望我的 css/图像在“资产”文件夹中。
我的期望是我的最终 css 移动到现在正在发生的“/asset”文件夹,上面的行应该从编译的 client.js 文件中删除。所以我可以从资产位置引用我的 index.html 上的 main.css。
解决方案
试试这个配置,看看它是否适合你
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
}
]
}
推荐阅读
- c - 我正在尝试使用 COM Moniker 抑制 UAC 提示
- python - SymPy 用符号代替向量
- laravel - 有没有办法在没有数据的情况下返回 0 几个月?
- mongodb - Mongo Spring JPA 在 findAll() 调用中给出 IndexOutOfBoundsException
- python - Python 库安装但无法导入
- javascript - 鼠标悬停时如何获取DOM列表?
- php - 在 Powershell 中运行 PHP 脚本会一直打开 NotePad++ 而不是执行 PHP 脚本
- python - NameError:未定义名称“驱动程序”
- docker - Docker - 数据库容器的最佳实践?
- postgresql - Hibernate:如何自动生成 36 个基本字符串的 id