为什么sass-loader在Angular中不能工作？
sass-loader在Angular中不能工作的原因可能有以下几点：
- 缺少依赖：sass-loader依赖于node-sass模块，需要先安装node-sass模块才能正常工作。如果没有正确安装node-sass模块，sass-loader将无法解析和编译Sass文件。
- 配置错误：在Angular项目中，需要正确配置webpack或者Angular CLI来使用sass-loader。如果配置错误，sass-loader将无法被正确加载和使用。
- 版本不兼容：sass-loader的版本与其他相关模块（如webpack、Angular CLI）的版本可能存在不兼容的情况。需要确保这些模块的版本兼容性，才能正常使用sass-loader。
解决这个问题的方法是：
- 确保已经安装了node-sass模块。可以通过运行以下命令来安装：
- 确保已经安装了node-sass模块。可以通过运行以下命令来安装：
- 确认webpack或者Angular CLI的配置文件中已经正确配置了sass-loader。在webpack配置文件中，需要添加相应的loader规则；在Angular CLI的配置文件（angular.json）中，需要在styles数组中添加相应的Sass文件路径。
- 如果版本不兼容，可以尝试升级或降级sass-loader、node-sass以及其他相关模块的版本，以解决兼容性问题。
需要注意的是，以上解决方法是基于一般情况下的推测，具体原因和解决方法可能因项目配置和环境而异。如果以上方法无法解决问题，建议查阅相关文档或寻求开发社区的帮助。
相关·内容
我在ionic v4中创建了项目，但在./src/global.scss中遇到错误，请参阅下面的错误
>ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Modu
浏览 3提问于2019-02-01得票数 5
回答已采纳
我有一个使用Angular的webpack的工作配置，以便将scss文件插入到bundle.js中。
{
test: /\.scss$/,
use: ['raw-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
}
但是，我想要获得一个包含应用程序中所有scs的css文件，所以我像这样使用ExtractTextPlugin
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ['ra
浏览 8提问于2017-03-04得票数 3
我安装了NPM软件包，在启动npm之后，我得到了node sass错误，如下所示：
抛出一个错误：
ERROR in ./node_modules/slick-carousel/slick/slick.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./no
浏览 2提问于2021-06-16得票数 4
回答已采纳
当我遵循在线指令时，我得到了错误
在./src/ (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)模块构建中出错：@import ' ~@material/theme '；^ File导入未找到或不可读：~@material/theme。在D:\Practice\angular\styles.scss中(第1行，第1列)
我不知道为什么它找
浏览 3提问于2018-08-23得票数 2
我使用的是角-cli: 1.0.0-beta.19-3和节点: v5.11.1
在我的angular-cli.json文件中，我已经将全局样式文件扩展名设置为.scss。
这是我的样式文件。
Angular2/src/styes.scss
// Default Font
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base
浏览 8提问于2016-11-10得票数 10
回答已采纳
我执行了对angular 6的更新。在ng serve -o期间，我收到了sass-loader预期节点-sass的错误。在运行ng serve -o之后，我收到：
ERROR in ./src/sass/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/sass/styles.scss)
Module build failed: Error: `sass-
浏览 0提问于2018-05-07得票数 22
我不得不重新格式化我的windows C驱动器并重新安装windows，现在突然我所有正在工作的angular项目都有这个问题！我已经尝试了几件事情来修复它，比如删除应用程序中的node modules文件夹，但似乎什么都不起作用。
我已经尝试过这些修复方法，它们都失败了：
npm install --save-dev webpack webpack-dev-server css-loader sass-loader节点-sass提取-loader文件加载器
npm install --save-dev --unsafe-perm node-sass
ERROR in ./src/styles
浏览 1提问于2019-11-01得票数 1
我试图建立一个新的Rails项目与webpacker和角。基本设置正在工作，但我不能包括自定义SCSS文件。我遵循了博客文章中的步骤，但我无法启动并运行它。我最后犯了错误
ERROR in ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./node_modules/to-string-loader/src/to-string.js!./node_modules/css-loader
浏览 1提问于2018-02-11得票数 2
2回答
我正在迁移一个库，以使用12 (目前在版本10中)，并且Storybook用于公开这个库的各种组件。为此，我使用“角度更新指南”将角和材料升级到版本12，用npx sb upgrade将故事簿升级到版本6.3，并按照描述的步骤完全迁移童话并使用webpack5。
不幸的是，以前在故事呈现中全局包含的base.scss文件不再包括在内(故事现在没有任何CSS)。这个base.scss文件包含在一个类型记录文件中：
import '!style-loader!css-loader!sass-loader!./base.scss';
与童话6.3和角10，一切都完美地运作。
为了解决
浏览 23提问于2021-10-15得票数 5
回答已采纳
2回答
我有一个这样写的"styles.scss“，在Angular 7版本中工作得很好：
/* You can add global styles to this file, and also import other style files */
@import "~ng-pick-datetime/assets/style/picker.min.css";
@import "~materialize-css/sass/components/_color.scss";
@import './colors';
$roboto-font-p
浏览 3提问于2019-07-06得票数 4
我有以下SCSS文件：
@use 'sass:math';
$html-font-size: 16px;
@function stripUnit($value) {
@return math.div($value, ($value * 0 + 1));
}
@function rem($pxValue) {
@return #{math.div(stripUnit($pxValue), stripUnit($html-font-size))}rem;
}
当组件调用此函数时，我在我的项目中得到一个错误：
Module build failed (from ./nod
浏览 17提问于2022-03-16得票数 0
我更新了软件包，在启动npm之后，我收到了以下2条警告：
警告在./src/ (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./src/assets/scss/style.scss) /scss/style.scss模块警告中(来自./node_node/post
浏览 0提问于2019-06-06得票数 18
1回答
I在中出现了错误
./src/styles/theme/bootstrap.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles/theme/bootstrap.scss)
Module build failed (from ./node
浏览 5提问于2020-02-17得票数 1
1回答
覆盖特定文件的角度加载器
、、、、
我们有一个使用angular创建的代码库，它使用angular cli及其默认的webpack配置。然而，我们开始从angular转向webcomponents。为了在我们的we组件ts文件中使用scss，我们创建了一个新的webpack加载器，在其中我们添加了正确的scss文件作为依赖项，等待来自sass-loader的编译的css，并使用字符串替换将其插入到我们的ts文件中。 这在正常的webpack环境中工作得很好。但是，angular还通过使用一些不同的加载器来处理scss文件。因此，scss文件不再包含实际的scss，而是javascript。这对于我们的其他scss文件仍然是需要
浏览 25提问于2019-06-03得票数 1
回答已采纳
我刚刚将Angular项目升级到最新版本(使用Angular材质的中型项目)。在尝试构建它时，我从多个组件的scss文件中得到以下错误。 ./src/app/layout/navbar/navbar.component.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
╷
7 │ color: mt.get-color-from-palette(theme.$foreground, inverted);
浏览 32提问于2021-06-23得票数 0
回答已采纳
4回答
几分钟前，我安装了角Cli 7，并通过
ng new my-app
我为css选择了预编译器SASS，但是当我编辑文件styles.sass时，styles.sass看起来是这样的
h1 { color: red }
但ng serve显示了这条消息
编译失败。
./src/contentes.sass (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_m
浏览 0提问于2018-10-25得票数 5
我得到的错误：
不能绑定到'ngforOf‘，因为它不是'div’的已知属性。(“]*ngfor=”让项目1，2，3"> {{ item } ")
描述：
我遇到了一个奇怪的问题，我试图在我的应用程序中使用*ngFor，但是它不能在任何可能的组合中工作。我试着用BrowserModule，CommonModule。都失败了。你知道我为什么不能让它起作用吗？
nav.component.ts
import {OnInit, Component} from '@angular/core';
@Component({
selec
浏览 4提问于2017-09-13得票数 1
回答已采纳
2回答
我用的是angular 2+ webpack + scss。由于某种原因，我不能使用scss变量：
$white: #fff;
.test{
color: $white;
}
在样式控制台中，我看到没有设置颜色(删除线)。
我的webpack配置：
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ['raw-l
浏览 4提问于2016-04-26得票数 0
我在编译sass时遇到了这个错误。
webpack：3.12.0，sass-loader：8.0.0.
另外，我使用angular2。
{
test: /\.(scss|sass)$/,
use: [
"to-string-loader",
{
loader: "css-loader",
options: {
sourceMap: false
}
},
浏览 7提问于2019-10-03得票数 14
回答已采纳
我将Angular从7更新到了9，并得到了这个错误： ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modul
浏览 141提问于2020-04-16得票数 0
我正在尝试在angular社区提供的angular2-seed中测试scss。
除了font- package包之外，一切都很正常。
以下是我的package.json
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"bootstrap-sass": "^3.3.7",
"css-loader":
浏览 0提问于2016-08-07得票数 1
1回答
我习惯了AngularCLI到Angular2。我用SCSS语法包括了sass预处理程序。但是当我在弹出之后输入ng serve或npm运行构建时，我得到了这样的内容。我检查了目录，一切都很好，我读到了有关SASS加载程序错误的文章，但是现在我有了修复该错误的最新版本。有人知道我怎么能修好它吗？
提前谢谢你。
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-
loader?{"ident":"postcss"}!./~/sass-l
浏览 11提问于2017-06-01得票数 2
回答已采纳
2回答
对不起，这是另一个webpack/scss/sass的问题。寻找答案让我头晕目眩，尤其是对webpack和角尚不熟悉。
我想使用sass/scss文件与我已经创建的使用VisualStudio2017 ASP.NET核心角项目模板创建的角4应用程序。
从盒子里出来，它会生成文件让你开始工作。我只想为app.component - app.component.scss创建一个新的scss文件。
我已经这样做了，并试图最好地猜测如何获得一些东西来操作scss文件。我完全不清楚什么是必需的。我看到网络上的大多数例子都使用了sass-loader，但是它们有不同的配置--这确实让我感到困惑。
所以我在
浏览 2提问于2017-08-16得票数 1
我正在尝试用angular学习rails，但我倾向于实现scss-loader。我已经在谷歌上搜索过了。我已经添加了他们试图做的事情，但不幸的是什么都没有发生，我总是得到这个错误Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"。
我添加了scss.d.ts
declare module "*.scss" {
const content: string
export default content
}
这是我的envir
浏览 14提问于2019-03-31得票数 2
回答已采纳
我得到了这个编译器错误。有人能告诉我我需要安装哪个nebular模块来修复这个问题吗？ Failed to compile.
./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!
./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
M
浏览 15提问于2019-02-18得票数 0
回答已采纳
1回答
我试图运行我的角14应用程序，但得到以下错误，同时试图在本地服务。请看下面的错误：
Build at: 2022-06-28T06:24:59.368Z - Hash: 217d45d22093a51f - Time: 5857ms
./src/app/app.component.sass?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected new
浏览 11提问于2022-06-28得票数 4
回答已采纳
1回答
好吧， 当我尝试启动我的angular应用程序时，我遇到了以下错误/警告。 ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build-
angular/src/angular-cli-files/plugins/raw-css-
loader.js!./node_modules/postcss-loader/src??
embedded!./node_modules/sass-loader/lib/loader.js??ref--13-
3!./src/sty
浏览 18提问于2019-06-30得票数 1
回答已采纳
我正在处理一个angular 7项目。最初，我使用的是节点版本10，但由于错误，我将节点升级到了版本12。
在那之后，我尝试编译我的Angular 7项目，它是thrwing错误。我再次重新安装旧版本，但它仍然抛出错误，如下所示。
ERROR in ./src/app/pages/pages.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
at Function.Module.
浏览 0提问于2019-05-11得票数 0
我刚开始接触angular，并且刚刚安装了它。现在我用scss制作了新的应用程序，当我尝试使用
ng serve
我收到下一个错误
ERROR in ./src/styles.sass (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.sass
浏览 0提问于2018-11-01得票数 0
我正在尝试在一个Angular 4.3.5的web应用中使用scss文件和我的组件，使用的是webpack 2.2.1。顺便说一句，我现在不能使用angular-cli。
下面是加载器的webpack.config文件部分。
{
test: /\.scss$/,
loader: 'raw-loader!postcss-loader!sass-loader'
},
// all css required in src/app files will be merged in js fi
浏览 9提问于2017-12-12得票数 0
(./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)模块构建失败(从./node_modules/sass-loader/lib/loader.js)：错误:缺少绑定E:\Angular App\Client\node_modules\node-sass\vendor\win32-x64-64\binding.nodeNode Sass找不到当前环境的绑定:带有Nod
浏览 3提问于2019-10-23得票数 0
在尝试使用angular-cli转换为angularjs/angular混合应用程序时，我的css遇到了一个问题。
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!../node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module
浏览 2提问于2019-12-31得票数 0
1回答
通过导入使引导程序工作。
、、、
我导入引导样式。
import "bootstrap/scss/bootstrap.scss"
然后我创建了一个简单的容器
<div className="container">
<div className="row">
<div className="col-6">
23423423
</div>
<div className="col-6">
234234234
</div>
浏览 1提问于2019-08-31得票数 0
这是我的功能模块的NgModule：
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
CustomCardComponent,
StyledDirective
],
exports: [CustomCardComponent]
})
export class CustomCardModule {}
在组件内部：
import {Component
浏览 4提问于2016-09-29得票数 0
1回答
我想在scss文件中使用“角”中的样式作为短地址。
我用这种方式来设计：
我在src文件夹中创建了一个文件夹，并将样式放在该文件夹上：
我去了angular-cli.json，我添加了以下内容：
"stylePreprocessorOptions": {
"includePaths": [
"src",
"src/stylings/",
"src/stylings/base/",
浏览 6提问于2020-05-06得票数 1
4回答
我正在当地的环境中经营一个钓鱼项目。在指定的范围内。我无法运行项目并获得以下错误: npm版本: 6.9.0角CLI: 7.3.9节点: 10.16.0操作系统: win32 x64
ERROR in ./src/assets/styles/style.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib
浏览 0提问于2019-07-29得票数 8
我正在做一个ionic项目，我从git上下载了我的同事项目，但问题是，他在mac上工作，而我在windows上工作，当我运行ionic serve时，我得到的是： > ng run app:serve --host=0.0.0.0 --port=8100
[ng] 'C:\Users\Louay Baccary\IonicWorkspace\SmartBeltIonic\node_modules\.bin\ng' is not recognized as an internal or external command,
[ng] operable program or
浏览 22提问于2019-02-24得票数 0
我尝试从Angular 2.4.1npm Angular 4升级，但我遇到了一堆与我的->模块相关的错误，所以我决定降级回原来的版本。现在的问题是，即使在我将我的package.json恢复到以前的版本，删除node_modules并运行npm install之后，我现在仍然收到这些错误，我不知道为什么：
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/styles.scs
浏览 1提问于2017-05-21得票数 0
1回答
In packege.json:
angular: 5.2.8
angular material : 5.1.1
angular/cli: "~1.7.3"
bootstrap: "~4.0.0"
当你发球时，会出错
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader??
embedded!./node_modules/sass-loader/lib/loader.js??ref--8-
3!./src/styles.scss
Module build failed:
浏览 1提问于2018-05-22得票数 0
2回答
我目前正在使用npm任务，在我的建设管道中的蔚蓝开发。最近，npm运行步骤开始失败，出现以下错误。当我手动安装sass和sass-加载程序时，npm运行步骤没有出现任何错误。如何从管道中安装完整的模块？
模块构建中的./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/lib/loader.js):错误(来自)
浏览 0提问于2021-01-12得票数 0
回答已采纳
所以我有一个角度应用程序，它使用webpack。从去年12月起我就没做过任何改变了。但是，在一台新机器上启动回购程序并确保运行了npm install和webpack命令之后，我得到了以下错误：
[776] ./src/global.scss 41 bytes {3} [built]
[777] ./src/theme/scss/kothapro.scss 311 bytes {2} [built] [failed] [1 error]
+ 763 hidden modules
ERROR in ./src/theme/scss/kothapro.scss
Module pars
浏览 1提问于2018-02-01得票数 0
1回答
工作环境:带SASS/SCSS的Angular 我正在做Angular项目，但我一直收到这个错误。我试图在SASS文件中添加一个自定义的主题调色板。有什么想法吗？ Failed to compile.
./src/styles.sass (../node_modules/css-loader/dist/cjs.js??ref--13-1!../node_modules/postcss-loader/src??embedded!../node_modules/resolve-url-loader??ref--13-3!../node_modules/sass-loader/dist/cjs.
浏览 28提问于2021-02-10得票数 2
回答已采纳
3回答
我正在尝试通过webpack 2dev服务器提供正在开发中的静态文件(图像)。我似乎不能让它起作用。这将是我的webpack文件，我提供一个角2应用程序，其中有图片文件夹/src/assets/images
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./helpers');
module.ex
浏览 6提问于2017-02-23得票数 0
回答已采纳
我无法将styles.scss文件从角通知程序导入到我的项目中。
以下是我的错误：
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError:
Can't find stylesheet to import. ╷ 10 │ @import" ~/angular-notifier/styles.scss"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/styles.scss 10:8 root stylesheet
ERROR in .
浏览 18提问于2022-03-07得票数 2
我们正在将我们的Angular应用程序从版本11升级到版本12。现在我们遇到了一个主题的scss问题…… @use '~@angular/material' as mat;
@function mat.get-color-from-palette($palette,$hue:default,$opacity:null) {
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
@return mat.get-color-from-palette($palette, default, $hu
浏览 20提问于2021-06-25得票数 0
2回答
我正在尝试编译我的第一个转角应用程序，但是ng serve却吐出了这个错误：
(./node_modules/@angular-devkit/build-angular/src/ang ular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embe dded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)模块构建失败(来自./node_dded！./node_modules/sass-loader/li
浏览 0提问于2018-10-31得票数 2
回答已采纳
我刚刚将我的应用程序从angular 6更新到angular 7，但是其中一些在angular 6中工作，而不是在angular 7中工作，它使浏览器处于无限加载状态。
例如：
@Component({
selector: 'app-page',
template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' +
items[key]}}</div>`
})
export class MyComponent {
object
浏览 2提问于2019-02-27得票数 0
6回答
我有一个用于角项目的CI/CD管道，该管道昨天运行良好，但今天相同的代码正在返回构建中的几个错误：
./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader
浏览 39提问于2022-07-20得票数 5
回答已采纳
尝试导入variables.scss文件并不断收到构建失败错误：
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js
!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./no
浏览 0提问于2018-10-31得票数 3
回答已采纳
1回答
我正为第一次尝试webpack而挣扎。
我在浏览器控制台中得到以下错误。
ERROR TypeError: $(...).sparkline is not a function
这是我的webpack.config.vendor.js代码
const path = require('path');
const webpack = require('webpack');
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require(
浏览 0提问于2018-03-23得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
