带有 sass-loader 的 Webpack 文件加载器
Webpack file-loader with sass-loader
我是 nodejs 的新手,在尝试使用 sass 时遇到问题。
The following information is just fictional, but it represents the
actual condition.
场景:
我有以下文件夹结构:
frontend/
- scss/
- style.scss
- main.js
webpack.config.js
目标:
我想使用 webpack 将 style.scss
编译为 style.css
并将其放入 dist/frontend/css/
目录中,因此它应该生成此路径:dist/frontend/css/style.css
并创建以下文件夹结构:
dist/
- frontend/
- scss/
- style.scs
- main.js
frontend/
- scss/
- style.scss
- main.js
webpack.config.js
代码:
main.js
import `style from "./scss/style.scss";`
webpack.config.js
module.exports = {
mode: "development",
entry: {
main: "./frontend/main.js"
},
output: {
path: path.join(__dirname, "/dist/frontend"),
publicPath: "/",
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
{
loader: "file-loader",
options: {
name: "css/[name].[ext]"
}
},
"style-loader/url",
"css-loader?-url",
"sass-loader"
]
}
]
}
结果:
我收到这条消息:
Module not found: Error: Can't resolve './scss/style.scss' in 'E:\project_name\frontend'
问题
为什么会这样?
实现目标的正确代码是什么?
如消息所述,此路径无效:'./scss/style.scss'
。定义路径时有错别字。该文件夹应该是 sass
而不是 scss
。
以下配置将实现问题中提到的目标:
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
"style-loader/url",
{
loader: "file-loader",
options: {
name: "css/[name].css"
}
},
"sass-loader"
]
}
]
}
它的工作方式类似于 Mini CSS Extract Plugin
,但当用于将多个 .scss
文件转换为不同的 .css
时,不会为每个 .css
文件生成额外的 .js
文件] 个文件。
我是 nodejs 的新手,在尝试使用 sass 时遇到问题。
The following information is just fictional, but it represents the actual condition.
场景:
我有以下文件夹结构:
frontend/
- scss/
- style.scss
- main.js
webpack.config.js
目标:
我想使用 webpack 将 style.scss
编译为 style.css
并将其放入 dist/frontend/css/
目录中,因此它应该生成此路径:dist/frontend/css/style.css
并创建以下文件夹结构:
dist/
- frontend/
- scss/
- style.scs
- main.js
frontend/
- scss/
- style.scss
- main.js
webpack.config.js
代码:
main.js
import `style from "./scss/style.scss";`
webpack.config.js
module.exports = {
mode: "development",
entry: {
main: "./frontend/main.js"
},
output: {
path: path.join(__dirname, "/dist/frontend"),
publicPath: "/",
filename: "[name].js"
},
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
{
loader: "file-loader",
options: {
name: "css/[name].[ext]"
}
},
"style-loader/url",
"css-loader?-url",
"sass-loader"
]
}
]
}
结果:
我收到这条消息:
Module not found: Error: Can't resolve './scss/style.scss' in 'E:\project_name\frontend'
问题
为什么会这样?
实现目标的正确代码是什么?
如消息所述,此路径无效:'./scss/style.scss'
。定义路径时有错别字。该文件夹应该是 sass
而不是 scss
。
以下配置将实现问题中提到的目标:
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
"style-loader/url",
{
loader: "file-loader",
options: {
name: "css/[name].css"
}
},
"sass-loader"
]
}
]
}
它的工作方式类似于 Mini CSS Extract Plugin
,但当用于将多个 .scss
文件转换为不同的 .css
时,不会为每个 .css
文件生成额外的 .js
文件] 个文件。