Webpack找不到SCSS与符号类
Webpack是一个现代化的前端构建工具，用于将多个模块打包成一个或多个静态资源文件。它可以处理各种类型的文件，包括JavaScript、CSS、图片等，并且支持各种前端开发框架。
SCSS是一种CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套规则、混合等特性，使得CSS的编写更加灵活和高效。在Webpack中使用SCSS需要安装相应的loader，例如sass-loader和css-loader，以及相应的依赖，如node-sass。
当Webpack找不到SCSS文件或符号类时，可能是由以下几个原因引起的：
- 路径配置错误：请确保在Webpack配置文件中正确配置了SCSS文件的路径。可以使用resolve.alias配置别名，以简化路径的书写。
- 缺少相应的loader：请确保已经安装了sass-loader和css-loader，并在Webpack配置文件中正确配置了这些loader。可以使用rules配置项来指定对应文件的loader。
- 缺少依赖：请确保已经安装了node-sass和sass依赖，以支持SCSS文件的编译。
- 文件命名错误：请检查SCSS文件的命名是否正确，包括大小写和文件后缀名。
- 符号类未定义：如果提示找不到符号类，可能是因为在SCSS文件中使用了未定义的类名或变量。请检查SCSS文件中的代码，确保所有的类名和变量都已经定义或导入。
对于以上问题，可以参考腾讯云的Webpack相关产品和文档：
- 腾讯云Webpack产品介绍：https://cloud.tencent.com/product/webpack
- 腾讯云Webpack文档：https://cloud.tencent.com/document/product/1218
通过阅读相关文档和调试，可以解决Webpack找不到SCSS与符号类的问题，并顺利进行前端开发工作。
相关·内容
1回答
我正在迁移一些SCSS代码，这些代码是为我们的团队编写的，并使用webpacker (运行webpack)迁移到我们的rails应用程序中，遇到了一些问题。这可能是相当容易的，但我对SCSS和webpack总体上有点不熟悉，所以它引起了一些头疼。 我有一个application.css文件，如下所示： @import "./base/_fonts.scss";
@import "./base/_typography.scss</
浏览 21提问于2019-05-27得票数 0
我正在使用PhpStorm 2018.2进行一个角度项目(用Webpack 4.16构建)resolve: {那么，我是做错了什么，还是PhpStorm中的一个bug？/')}`}@import '#styles/_variables';
错误将从phpSto
浏览 0提问于2018-07-31得票数 1
我遵循了官方文档中给出的流程，说明要使用webpack-安可。但是我在根据文档使用它时有一个错误。"symfony/webpack-encore-bundle": "^1.5", },
... 我有一台webpack.config.js。但是在Symfony文档中，我找不到任何关于调整package.json oO的内容，那么我该如何让它工作呢？为什么yarn run encore不工作？
浏览 29提问于2019-05-22得票数 3
1回答
但是，无论我尝试什么，都会发生以下错误：
module.exports = { sourceMap: true, scss: { @import "~@/my-node-module/theme/engine.scss";
浏览 1提问于2020-04-21得票数 2
回答已采纳
resolve: { scss: path.resolve(__dirname, 'source', 'sass') // I tried '..import utils from 'scss/_utilities';| webpack|- prod.js|- sass
|-- _commo
浏览 0提问于2017-10-11得票数 1
我正在将一个网站从Webpack1升级到Weback3，我很难将scss加载程序转换为Webpack 3格式，因为下面一行： test: /\.scss
浏览 3提问于2021-08-08得票数 0
回答已采纳
1回答
我现在尝试了几个小时让全局变量在电子邮件中与webpack和vue一起工作，但是vue找不到声明的变量。webpack.config.js test: /\.scss$/, "vue-style-loader", loader: "sass-resources-loader",
浏览 0提问于2019-02-08得票数 1
1回答
我正试图将scss编译成css。我希望webpack基本上和sass app.scss : app.css一样。我试图使用extract-text-webpack-plugin来配置它，但是我做了一些错误的事情或遗漏了smth。这是我的webpack.config.js文件。我不知道该怎么做。const webpack = require("webpack");
const ExtractTextPlugin = require("extr
浏览 3提问于2018-01-07得票数 1
回答已采纳
2回答
未找到要导入的文件
、、、
因此，我试图将我的SCSS文件与所有vars和mixins定义导入到我所有的组件中。defs的文件名为_defs.scss：@import "styles/defs";
</style>
浏览 9提问于2017-08-22得票数 0
回答已采纳
找不到./app/index.scss模块时出错:错误:无法解析'file‘或'directory’./../node_modules css-loader/index.js位于C:\Users\johnliang\Temp\webpack-angular/app @ ./app/index.scss 4:14-116 13:2-17:4 14:20-122
找不到./app/index
浏览 3提问于2015-05-16得票数 6
我需要从scss文件中提取类名，并在webpack构建scss时作为数组发送到json文件。
我找不到webpack的插件来做这个。
浏览 7提问于2022-08-03得票数 0
1回答
,根据文档，这应该可以完成这项工作，但是当我完成这个过程时
mv src/App.css src/App.scss
浏览 1提问于2017-03-14得票数 2
回答已采纳
我面临着Webpack在相对道路上的一个问题。的标准变量、预定义布局、modals、类等组成的SCSS文件重用到项目B中。但是，当A项目的index.s
浏览 8提问于2016-12-23得票数 12
回答已采纳
/style.scss'
return <button className="my-button
浏览 4提问于2016-12-09得票数 1
回答已采纳
1回答
/src/app/theme/components/baAmChart/baAmChart.scss@import "~ammap3/ammap/ammap"
浏览 0提问于2018-02-16得票数 0
1回答
我有以下文件夹设置： scss/ grid.csswebpack/在我的webpack.config.js中，我有以下加载程序来处理scss和css： test: /\.(css|scss)$/,
exclude: path.join(__dirname, '..
浏览 0提问于2016-06-28得票数 1
回答已采纳
1回答
我有一个SSR应用程序- (React+express)，我的webpack是这样的： main: ['babel-polyfill', './components/site1/scss/main.scss',
浏览 1提问于2018-07-08得票数 0
我正在尝试跳过要导出的依赖项加载字体(使用url() )。我使用的是ignore-loader模块。 mix.webpackConfig({ rules: [ test: /context-menu-icons\.(eot|ttf|otf|woff|woff2)$/, } }
}); 问题是它会产生空文件。我期望的行为是根本不输出这些文件。
浏览 42提问于2020-06-10得票数 0
我正在使用Webpack捆绑我的React + Typescript应用程序，并希望使用SASS进行样式设置。(scss|css)$/, } use: [MiniCssExtractPlugin.loader, 'css-loader'
浏览 59提问于2021-01-07得票数 0
回答已采纳
1回答
我正在尝试使用webpack和分形构建来创建一个UI库。在这里，我执行以下操作:从SVG生成图标/使用SCSS代码中的图标类将其扩展为元素的类。从SVG文件生成的CSS类和SCSS代码示例中扩展的图标类示例： .icon-<svg-file-name>:before { <Style attributesfor icons>
.close
浏览 30提问于2020-06-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
