第一。我知道有人问过这样的问题，但我缺少一些了解它们的内容。我正在尝试将CSS编译为CSS。我希望webpack基本上与做相同sass app.scss : app.css。我尝试使用进行配置extract-text-webpack-plugin，但是我做错了什么或缺少了什么。
如果我include(app.scss)进入，它会起作用，app.js但这没有任何意义，因为如果有人禁用了JavaScript，则样式将无法工作。
这是我的webpack.config.js档案 我不知道该怎么做。
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var jsConfig = {
entry: "./_dev/scripts/app.js",
output: { filename: "./scripts/bundle.js" },
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
};
var scssConfig = {
entry: "./_dev/scss/app.scss",
output: { filename: "./content/app.css" },
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin({filename:"./_dev/scss/app.scss"}),
]
};
var config = [scssConfig, jsConfig];
module.exports = config;
编辑：我也发现了这一点。本系列文章对我所有的问题都会有所帮助，因此，如果您有类似的问题，请务必在询问之前先阅读它！
https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-v-495dba627718
您需要包括app.scssforwebpack以便能够找到您的scss引用，因为webpack它将遍历您的项目，并将加载器应用于通过引用从app.js递归向下开始可以找到的所有文件。如果您没有app.scss对项目中某处的引用，webpack则无法找到它，也无法构建它。因此，在您的项目条目（假设是app.js）中，您需要执行以下操作：
import 'relative/path/to/styles/app.scss';
但这并不意味着那些未js启用的人将不会收到您的样式。您app.scss只需要build在项目的阶段中包含样式，之后，html即使没有js启用样式，样式也将包含在其中并被加载。
webpack概念部分解释了如何webpack基于entry构建内部依赖关系图的点来查找依赖关系。
更新：
有一种方法可以让您不添加自己app.scss的js。您可以在webpack配置的输入对象中包含多个文件。这是您的情况下配置外观的示例：
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
entry: {
main: [
"./_dev/scripts/app.js",
"./_dev/scss/app.scss"
],
},
output: {
path: './scripts',
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(css|scss)/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin("./_dev/scss/app.scss"),
]
};
module.exports = config;
有关SO问题的更多信息，请参见webpack-multiple-entry-points-sass-and-js。
您还对ExtractTextPluginin进行了错误的配置webpack。您将整个路径放在的选项中filename，这是不正确的。在您的情况下，它应如下所示：
plugins: [
new ExtractTextPlugin("./_dev/scss/app.css"),
]
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句