css - 如何获取一堆 scss 文件并为所有应用程序制作一个 css 文件
问题描述
我有 webpack.config 并且不知道我需要在其中放置什么模块,因为我找到了模块,它只会最小化 css 或 scss 文件,但不会收集它们。
所以我有 8-9 个 scss 文件,并且需要一个 css 文件,它从它们收集所有代码
var path = require('path');
module.exports = {
entry: {
home: './src/main/js/home/home.js',
products: './src/main/js/products/products.js',
product: './src/main/js/product/product.js',
profile: './src/main/js/profile/profile.js',
topics: './src/main/js/topics/topics.js',
topic: './src/main/js/topic/topic.js',
},
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/[name].bundle.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
}
]
}
};
我应该安装什么模块,以及我需要在 webpack.config 中放置代码的位置。请帮忙,我从未使用过 webpack!
var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
home: './src/main/js/home/home.js',
products: './src/main/js/products/products.js',
product: './src/main/js/product/product.js',
profile: './src/main/js/profile/profile.js',
topics: './src/main/js/topics/topics.js',
topic: './src/main/js/topic/topic.js',
_article: './src/main/resources/static/sass/_article.scss',
_catalog: './src/main/resources/static/sass/_catalog.scss',
_home: './src/main/resources/static/sass/_home.scss',
_header: './src/main/resources/static/sass/_header.scss',
_footer: './src/main/resources/static/sass/_footer.scss',
},
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/[name].bundle.js'
},
module: {
rules: [
{
test: [ /\.scss$/, path.join(__dirname, '.')],
exclude: /(node_modules)/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})[{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
};
那是我的 webpack.config
解决方案
webpack 的工作方式与 gulp 不同。Gulp 是一个任务运行器,可以处理globs
和归档模式。Webpack 是一个捆绑器,它根据您的入口点分析依赖树,以便能够创建您的捆绑包。
为了使用 webpack 并捆绑所有 scss 文件,它们需要从您的入口点导入到某个地方。这是 webpack 知道这些文件存在的唯一方法。
编辑:正确的配置。
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
home: './src/main/js/home/home.js',
products: './src/main/js/products/products.js',
product: './src/main/js/product/product.js',
profile: './src/main/js/profile/profile.js',
topics: './src/main/js/topics/topics.js',
topic: './src/main/js/topic/topic.js',
_article: './src/main/resources/static/sass/_article.scss',
_catalog: './src/main/resources/static/sass/_catalog.scss',
_home: './src/main/resources/static/sass/_home.scss',
_header: './src/main/resources/static/sass/_header.scss',
_footer: './src/main/resources/static/sass/_footer.scss',
},
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/[name].bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
};
推荐阅读
- java - 当我试图在我的设备上测试游戏时,“不幸的是,应用名称已停止
- java - 使用android studio的fire base中的身份验证问题
- spring - 本机 SQL 选择强制在事务方法中刷新
- python-3.x - 速记 If Else 语句的结构分解
- javascript - 什么时候应该使用 JSDocs?
- python-3.x - 如何使用kivy一次运行两个进程
- sql - SQL Server 2017 - 根据订单号连接值
- c++ - 无法插入类集
- c++ - 将可变参数模板扩展为静态成员数组
- node.js - `sudo npm install -g npm` 被认为是个坏主意,但没有 `sudo` 就无法工作