javascript - Webpack 仅在特定文件中查找更改
问题描述
我在我的项目中使用 Webpack 来观看 .scss 和 .ts 文件。
我有带有 scss 文件的文件夹。
这是结构:
当我在 app.scss 文件中编辑某些内容时,Webpack 会监视更改并重新编译。
当我在包含文件夹中编辑某些内容时,Webpack 不会重新编译。
webpack.config.js
:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
let dist = 'wwwroot'
module.exports = {
entry: {
app: './src/js/app.js'
},
output: {
path: path.resolve(__dirname, dist),
filename: 'js/[name].min.js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
},
]
},
{
test: /\.s?[ac]ss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader',
{
loader: "sass-loader",
options: {
includePaths: ["./node_modules/foundation-sites/scss"]
}
}
]
},
{
test: /\.(png|jp(e*)g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: 'fonts/',
publicPath: '../fonts/',
}
}
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
options: {
name: "[name].[ext]",
outputPath: 'img/',
publicPath: '../images/',
}
}
]
},
resolve: {
alias: {
"jquery.validation": "jquery-validation/dist/jquery.validate.js"
}
},
plugins: [
new CleanWebpackPlugin(dist, {}),
new MiniCssExtractPlugin({
filename: "css/[name].min.css",
chunkFilename: "[id].css",
}),
new CopyWebpackPlugin([
{
from: './src/img',
to: 'images',
toType: 'dir'
}
]),
],
}
我不明白为什么它不能处理包含文件夹中的文件。我的问题在哪里?
解决方案
将 sass 文件夹添加到包含选项中:
options: {
includePaths: ["./node_modules/foundation-sites/scss", "path-to-your-sass-folder"]
}
推荐阅读
- cypress - 伪造赛普拉斯的非 XHR 网络请求
- c++ - const 在返回类型中使用时如何影响函数
- python - 将文件连同文件路径从列表复制到文件夹或其他路径
- python - 使用字典从现有的列中生成新列
- google-colaboratory - FailedPreconditionError:从容器读取资源变量 _AnonymousVar54 时出错:本地主机
- python - 如何使图像在android python kivy上全屏显示?
- android - 使用 firebase MLKit 运行多个图像处理器
- flutter - 管理飞镖中的异常
- python-3.x - 如何从 Python 列表中的项目中删除尾随和前导空格?
- laravel - 目标类 [App\Repositories\User\UserRepository] 不存在