webpack - 为什么我应该在入口 webpack 配置中声明 scss 文件
问题描述
为什么我的 webpack 配置无法观看scss
文件?如果我明确地将文件添加到entry
然后它正在工作,创建 css 文件。这是一个好习惯吗?
/// <binding ProjectOpened='Watch - Development' />
"use strict";
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
watch: true,
entry: {
app: './src/scripts/app.js',
People: './Views/People/Index.cshtml.js',
Service: './Views/Service/Index.cshtml.js',
sass: './src/sass/app.scss' // <- this should explicitly stated
},
plugins: [
new MiniCssExtractPlugin({
path: path.join(__dirname, '/wwwroot/css/'),
filename: 'app.css',
})
],
output: {
publicPath: "/js/",
path: path.join(__dirname, '/wwwroot/js/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: ['es2015']
}
},
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.js', '.vue']
}
};
解决方案
Webpack 的 watcher 对scss
文件没有任何怨恨。
Webpackdependency graph
从 中提到的所有文件开始制作entry files
,然后是imported
这些文件中的所有文件,然后imports
是下一级的所有文件......
Webpack watch
仅跟踪上述依赖关系图中的文件。
现在,您必须将文件导入依赖关系图中的任何文件中。
如果您scss
没有被依赖图中的任何文件导入,那么您必须将其添加为,new entry file
或者您可以使用您正在使用的 IDE 的任何插件来监视scss
文件并在更改时编译它们css
。
推荐阅读
- python - 如何在scrapy中抓取json api
- docker - docker-compose 无法在 nginx.conf 中打开letsencrypt/options-ssl-nginx.conf 文件
- flutter - 如何正确验证 AdMob 的 Flutter GoogleAPIs 包
- javascript - 尝试对 Typescript 类进行单元测试时不是构造函数错误
- flutter - 支持排队和多个播放列表的应用程序的 audio_service 和 just_audio 设计
- json - 使用 jq 将 JSON 解析为数组 - bash
- javascript - CodeMirror 同步活动行
- javascript - 解析带有变量的 JSON 返回时遇到问题
- ios - 如何使用 admin.messaging().sendToDevice(registrationToken, payloadIos) 从 firebase 函数向 iOS 应用发送通知?
- templates - 在 debug=False 模式下使用 BrowsableAPIRenderer