我是 webpack 的新手,正在学习一门类(class)。但是他们没有真正谈论的一件事是如何将不同的 sass 编译为 css。
我已经尝试过这里,但出现错误。我试图让它输出到 styles.css 以便与 wordpress 一起使用
const path = require('path'),
settings = require('./settings');
module.exports = {
entry: {
home: [
settings.themeLocation + "js/scripts.js"
],
style: [
settings.themeLocation +'styles/main.sass'
]
App: settings.themeLocation + "js/scripts.js"
},
output: {
home: [
path: path.resolve(__dirname, settings.themeLocation + "js"),
filename: "scripts-bundled.js"
]
style:[
path: path.resolve(__dirname, settings.themeLocation + "styles"),
filename: "styles-bundled.css"
]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{ test: /\.css$/, use: 'css-loader' }
{ test: /\.sass$/, use: 'sass-loader' }
]
},
mode: 'development'
}
最佳答案
这是我的 webpack 配置的一个片段
你需要安装style-loader、css-loader和sass-loader
以下片段用于开发部分
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
用于生产
{
test: /\.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 2,
},
},
],
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
importLoaders: 3,
},
},
'sass-loader',
],
},
将以下内容添加到插件部分
new MiniCssExtractPlugin({
filename: '[name].[chunkhash:8].css',
}),
请注意,上面的代码片段可能无法直接为您工作,它只是让您了解 webpack 如何处理 css $ scss
关于css - 无法让 webpack 输出捆绑的 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52417514/