使用 import 而不是 require 时 webpack 不捆绑 scss
Posted
技术标签:
【中文标题】使用 import 而不是 require 时 webpack 不捆绑 scss【英文标题】:webpack not bundling scss when using import instead of require 【发布时间】:2021-10-28 04:00:19 【问题描述】:简单的 webpack 设置,当我使用 import
加载我的 scss 时,它完全从包中丢失。应该导入的那一行根本就不见了。当我改用require
时,它可以工作。
optimization: usedExports: true
不是问题,有没有我都试过了
mini-css-extract-plugin 也不起作用。
当我在 scss 中输入错字时它会抱怨,所以它被解析但最终没有捆绑?
index.js
require("./scss/style.scss");
//import "./scss/style.scss" <--- not working
import createApp from 'vue';
import App from './components/App.vue';
const el = document.getElementById('app');
createApp(App).mount(el);
webpack 配置
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader');
const DefinePlugin = require('webpack');
const dist = path.resolve(__dirname, "dist");
module.exports = env =>
const mode = env.production == true ? "production" : "development";
const devtool = mode == "production" ? false : "inline-source-map";
return
mode: mode,
entry: './web/index.js',
output:
filename: 'bundle.js',
path: dist
,
optimization:
usedExports: true,
,
devServer:
static:
directory: dist
,
port: 8888
,
module:
rules: [
test: /\.(sa|sc|c)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
,
test: /\.(ttf|eot|woff|woff2|svg)$/,
use:
loader: 'file-loader',
options:
name: '[name].[ext]',
outputPath: 'fonts/'
,
,
,
test: /\.vue$/,
loader: 'vue-loader'
]
,
plugins: [
new CleanWebpackPlugin(),
new DefinePlugin(
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
),
new HtmlWebpackPlugin(
template: path.resolve("./web/index.html")
),
new VueLoaderPlugin()
],
resolve:
extensions: ['.js'],
alias:
"@": path.resolve(__dirname, 'web')
,
devtool
;
;
【问题讨论】:
【参考方案1】:我发现了问题,但我不明白为什么 webpack 会丢弃它。
引用https://webpack.js.org/guides/tree-shaking/
请注意,任何导入的文件都会受到树抖动的影响。这意味着如果您在项目中使用 css-loader 之类的东西并导入 CSS 文件,则需要将其添加到副作用列表中,以免在生产模式下无意中将其丢弃:
在我的 package.json 我放了
"sideEffects": false,
能够使用treeshaking。 但我不得不在加载器规则中禁用它
test: /\.(sa|sc|c)ss$/,
use: ['style-loader','css-loader','sass-loader'],
sideEffects: true <----
【讨论】:
以上是关于使用 import 而不是 require 时 webpack 不捆绑 scss的主要内容,如果未能解决你的问题,请参考以下文章
为啥我必须对 React 中的图像使用“require”而不是“import from”?
Gulp-sass 5.0 如何使用带有 import() 而不是 require() 的编译器?