开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在使用angular-cli@1.0.0-beta.21执行ng构建-prod时找不到模块css-loader

的问题可能是由于以下原因导致的：

版本不兼容：angular-cli@1.0.0-beta.21可能与css-loader的版本不兼容。建议尝试更新angular-cli版本或降低css-loader版本，以解决依赖问题。
缺少依赖：可能是由于缺少css-loader的依赖导致找不到模块。请确保已经正确安装了css-loader及其相关依赖。可以通过运行npm install css-loader --save-dev来安装css-loader。
配置错误：可能是由于angular-cli的配置错误导致找不到模块。请检查angular-cli.json文件中的配置，确保正确引入了css-loader。

解决该问题的方法如下：

确认版本兼容性：查看angular-cli@1.0.0-beta.21的官方文档或社区支持页面，了解该版本与css-loader的兼容性。如果存在兼容性问题，考虑升级或降级相应的版本。
安装依赖：运行npm install css-loader --save-dev来安装css-loader及其相关依赖。确保package.json文件中已正确添加了css-loader的依赖。
检查配置：检查angular-cli.json文件中的配置，确保正确引入了css-loader。可以尝试重新配置或更新配置文件。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云提供了一系列云计算相关产品，包括云服务器、云数据库、云存储等。以下是一些相关产品和介绍链接：

云服务器（CVM）：腾讯云的弹性云服务器，提供高性能、可扩展的计算资源。了解更多：云服务器产品介绍
云数据库MySQL版（CDB）：腾讯云的关系型数据库服务，提供高可用、可扩展的MySQL数据库。了解更多：云数据库MySQL版产品介绍
云存储（COS）：腾讯云的对象存储服务，提供安全、可靠的云端存储解决方案。了解更多：云存储产品介绍

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。

相关搜索:* in用于在in/angular项目中使用模块中的变量时不执行 ./asinstall在使用dockerfile构建docker时找不到？angular http请求在使用ng build --prod构建时从不返回数据 Angular2/Angular-cli在使用--prod开关构建时出现奇怪的错误 ionic-app-script在构建时失败-找不到模块“@angular/编译器-cli/ngtools2”Jenkins -执行Windows批处理命令-在ng构建时失败使用CUDA在docker上运行torch时表示找不到模块'cutorch‘使用ng serve时出现Angular8错误:找不到模块“@angular-devkit/build-angular”使用python执行命令行脚本时找不到'__main__‘模块在Angular 7应用程序中使用svg.js插件时出现Prod构建错误

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

webpack从零搭建开发环境

压缩合并图片等代码分割:提取多个页面的公共代码提取首屏不需要执行部分的代码让其异步加载模块合并:在采用模块化的项目会有很多个模块和文件，需要构建功能把模块分类合并成一个文件自动刷新:监听本地源代码的变化...，自动重新构建，刷新浏览器代码校验:在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过自动发布:更新完代码后，自动构建出线上发布代码并传输给发布系统在 webpack 应用中有两个核心...模块转换器:用于把模块原内容按照需求转换成新内容，可以加非 JS 模块扩展模块:在 webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做 NIIT 想要的事情初始化项目 npm init...commonJs 规范是 Node 也支持 es6 规范 esmodule 把模块打包，解析出浏览器可以识别的代码装 webpack 的时候是装的开发环境直接 webpack 是找不到的，可以使用...可以在 base 文件合并可以创建 dev，prod 分别在这两个文件中合并 base "scripts": { "build": "webpack --env.production --config

1.2K2 0

12. Vue搭建本地服务

安装本地服务模块 npm install --save-dev webpack-dev-server@2.9.1 --save-dev: 本地服务只有在开发环境的时候才会使用, 所以, 我们以dev模式安装...) 安装Xcode插件 sudo xcode-select --install 然后在执行npm install --save-dev webpack-dev-server@2.9.1就成功了....开发环境的配置拷贝到dev.config.js中需要构建的部分拷贝到prod.config.js中 base.config.js const path = require("path") const...模块来加载. --- 当文件来处理, 就需要打包成文件, 需要file-loader // 这是加载的文件目录是根目录, 结果找不到文件, 所以也不显示,...开发环境使用: base.config.js 和 dev.config.js 线上环境使用: base.config.js 和 prod.config.js 那么, 导入配的时候, 如何将其合并呢?

9292 0

Angular CLI 常用终端操作命令

关于CLI生成路由 ---- CLI以多种方式支持路由：初始化创建项目时，自动添加了 @angular/router ，自动添加到package.json 文件中生成模块路由的时候可以使用指令...该--routing选项还会生成与模块名称相同的默认组件。您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...CLI 构建正式服务器打包文件和测试环境文件还有本地文件 ---- ng build 可以同时指定要与该构建（或）一起使用的构建目标（ --target...默认情况下，使用开发构建目标和环境。...ng build --environment=loca ng build --environment=prod 关于代理服务器 ---- 在webpack的dev服务器中使用代理支持，我们可以高速缓存某些

2.1K4 0

Webpack4 搭建 Vue 项目

，提升代码在浏览器中的执行速度 NoEmitOnErrorsPlugin ：在输出阶段时，遇到编译错误跳过 OccurrenceOrderPlugin ：给经常使用的ids更短的值 SideEffectsFlagPlugin..."vue-loader": "^15.2.6", "vue-template-compiler": "^2.5.17", 由于 vue 的解析在 dev 和 prod 中均需使用，因此归入基本配置 base..." }, --hot 模块热替换 --open 开启本地服务器此时 npm start，项目可正常运行 3....length }); // ...省略号 rules: [ { test: /\.js$/, //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行...，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值 chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk

1K1 0

「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass

集成 css、less 与 sass 上篇文章带大家使用 webpack 5集成 React 与TypeScript，同时为了提高我们的代码质量，我们会在构建中添加「类型检查」和「代码规范校验」。...配置 css 1.1 开发环境为了在 JavaScript 模块中import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置中添加这些...webpack 再遇到.css文件时，它将使用css-loader和style-loader进行处理（use 数组中的加载器从后向前执行）。...css-loader 在 import 语句（在我们的示例中为app.css）中读取引用的 CSS 文件并解析成 JavaScript 代码。...使用 CSS modules 当开发人员命名的类有冲突时，后面的样式会覆盖前面的样式。那么该如何解决呢？

1.5K1 0

用 webpack 4.0 撸单页多页脚手架 (jquery, react, vue, typescript)

下一步是支持css，我们先安装如下几个模块： npm install --save-dev css-loader style-loader 复制代码在webpack.base.js中的module中添加如下代码...MiniCssExtractPlugin时就不能使用style-loader了 { loader: 'css-loader...和prod环境的css-loader不一样，所以我们将base的css-loader配置删除，移到dev下 // webpack.dev.js const base = require('....MiniCssExtractPlugin时就不能使用style-loader了 { loader: 'css-loader...MiniCssExtractPlugin时就不能使用style-loader了 { loader: 'css-loader

2.3K2 1

【Webpack】Webpack4.x 常用操作 | 案例 | 相关构建工具

/dist') } } 5、执行webpack npx webpack进行构建你可以在package.json 的scripts下加入"build":"npx webpack" 以后就只需要执行...在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下，请使用轮询. poll: true。...在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下，请使用轮询. poll: true。...OptimizeCSSAssetsPlugin({}) ] } }; 你可以通过npx webpack --config webpack.dev.js或npx webpack --config webpack.prodjs 在构建时执行不同环境下的配置文件...npm webpack --config webpack.prod.js" } 以后只需执行：npm run dev或npm run prod

2441 0

webpack介绍、配置、使用

主要用于Nodejs，根据CommonJS规范，一个单独的文件就是一个模块，加载模块使用require()方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。...对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同） Ⅱ....、合并、编译、浏览器实时更新等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程，自动化构建工具并不能把所有模块打包到一起，也不能构建不同模块之间的依赖关系。...loader用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。..." }, 怎样执行命令执行开发环境的中配置 npm run dev 执行生产环境的中配置 npm run prod 13、在生产环境中配置代码压缩功能配置webpack.prod.config.js

2.5K1 0

Angular Library 快速入门

创建 sf-lib 库 $ ng generate library sf-lib --prefix=sf 这里我们快速总结一下 ng generate library 命令执行的操作：在 angular.json...： $ ng build --prod sf-lib 小伙伴们，在构建 Library 时，记得始终添加 —prod 标志。...创建 sf-lib 组件相信 ng generate 命令对于使用过 Angular CLI 的同学来说，都不会陌生。...在完成新建 ButtonComponent 组件的导出工作后，我们需要使用下列命令，重新构建 sf-lib 库： $ ng build --prod sf-lib sf-lib 重新构建成功后，我们就可以在模板中使用刚创建的...SfLibConfigService, useValue: config } ] }; } } 即通过提供 forRoot() 静态方法，让模块的使用方来配置模块中的

2.4K1 0

Webpack高级配置实战

前言本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。...入口（entry）入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。...在本例中，使用 src/index.js 作为项目入口，webpack 以 src/index.js 为起点，查找所有依赖的模块。...DevServer在每次编译代码时，手动运行 npx webpack --config config/webpack.prod.js 会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码...加载 CSS为了在 JavaScript 模块中 import 一个 CSS 文件，需要安装并配置 style-loader 和 css-loader。

1.2K4 0

Webpack配置实战

前言本篇将从实践出发，搭建一个基础的支持模块化开发的项目，在第二章节《进阶配置》中使用 webpack 搭建一个 SASS + TS + React 的项目。...入口（entry）入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。...在本例中，使用 src/index.js 作为项目入口，webpack 以 src/index.js 为起点，查找所有依赖的模块。...DevServer在每次编译代码时，手动运行 npx webpack --config config/webpack.prod.js 会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码...加载 CSS为了在 JavaScript 模块中 import 一个 CSS 文件，需要安装并配置 style-loader 和 css-loader。

1.2K4 0

2022-webpack5实战教程

如果使用less来构建样式，则需要安装 npm i -D less less-loader 如果使用scss来构建样式，则需要安装 npm i -D node-sass sass-loader...','less-loader'] // 此外还需要安装less模块 } ] } } 打包之后在浏览器中打开html文件，就能看见我们注入的css 图片为css添加浏览器前缀...如果想要拆分就只有用其他办法里，网上看别人用的是extract-text-webpack-plugin，不过当我去npm官网看时。...在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost...我们在原来webpack.config.js的基础上再新增两个文件webpack.prod.js和webpack.dev.js 这里我们需要使用webpack-merge帮我们merge代码 npm

8493 0

webpack基本配置项_webpack配置文件详解

前言上篇我们已经配置好了本地开发服务器，但是配置的相对比较凌乱，一个文件中有些是开发时用到的配置，有些是生成时用到的配置，有些是开发和生成都要用到的配置，所以我们这里把环境分为3个环境 webpack.base.config.js...(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。...在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost...为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。.../build/webpack.dev.config.js" // 本地开发环境 }, 如果我们正在处于开发阶段，就在终端执行npm run dev 如果我们已经开发完成，就在终端执行npm run

5392 0

webpack3.x文件配置

package.json 文件，可以执行初始化操作 npm init 2、创建package.json 文件 { "name": "demo", "version": "1.0.3",...---- 二、安装使用命令：(2种安装方法，任何一种都行) 1、简单方法：复制上面的 package.json文件到你的工作目录，执行 npm install 即可，他会自动下载 package.json...css-loader!less-loader" }, { test: /\....，或者找不到了，直接使用npm i 模块名 --save-dev进行安装即可！...包括在提供请求时使用的自签名证书。 --cert，--cacert，--key：路径的证书文件。 --open：在默认浏览器中打开url（对于webpack-dev-server版本> 2.0）。

8272 0

Webpack多入口文件、热更新等体验

chunk的模块，插件导入到模板时没有排序，但都是。...excludeChunks：被排除的模块 chunksSortMode：添加到页面时模块的排序 none|default|function template：模板文件路径所在位置 templateContent...：一个函数，使用编程语言创建模板 inject：js插入位置：body, head 模板可以访问的配置项 files：为webpack的stats项，可以在模板文件中使用或者 webpackConfig...二、webpack.optimize.CommonsChunkPlugin 抽取公共模块为一个独立的文件，一是指定的多个模块打成一个包；二是在指定的chunks中抽取公共模块参数名称说明 name...实现环境变量的定义 "prod": "cross-env NODE_ENV=prod node .

2.6K6 0

Angular CLI 简介

build / ng build 是执行构建..........生成Gurad. ng g guard xxx 这个命令将会生成xxx.guard.ts 使用Angular CLI进行Build (构建) 和 Serve 第一篇文章是: "使用angular cli...source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面....CLI生成路由" : http://www.cnblogs.com/cgzl/p/8611532.html 第四篇文章时: “使用Angular CLI进行Build (构建) 和 Serve”: http...使用ng test -sr或者ng test -w false 执行单次测试测试代码覆盖率: ng test --cc 的报告默认是生成在/coverage文件夹下, 但是可以通过修改.angular-cli.json

6K11 0

40·灵魂前端工程师养成-前端框架webpack

6)SQL执行及审批流程。 7)慢查询日志分析web界面。...webpack-demo-1 # 用VScode打开，windows可以拖进VScode MacBook-pro:HTML driverzeng$ code webpack-demo-1/ # 打开后新建终端，在VScode...中执行(创建package.json) MacBook-pro:webpack-demo-1 driverzeng$ npm init -y # 安装webpack用npm MacBook-pro...[contenthash].js' } }; 现在我们修改一下，index.js的内容，重新构建一下。.../assets/1.jpeg"> `; 直接build会发现，我靠，根本找不到图片，因为这个图片指定的路径是assets目录，但是我们build完了之后，你的代码目录是dist目录啊...所以我们需要使用

8021 0

webpack5基础

1.为什么需要打包工具我们在开发时一般使用框架，vue，react，es6模块化，scss等，这样的代码要想在浏览器运行必须转成浏览器识别的js，css才能运行，所以这时候就需要webpack了。...pnpm install --save-dev css-loader 安装style-loader pnpm install style-loader 处理sass资源创建sass文件夹，在文件夹下创建...运行开发模式执行npx webpack serve --config ..../config/webpack.prod.js" }, 此时运行程序时使用npm start即可提取css成单独文件单独打包生成css，防止闪屏, 安装npm install --save-dev..., 样式兼容性处理安装包npm install postcss postcss-loader postcss-preset-env -D 增加配置，在css-loader后面，less-loader前面

2092 0

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过.../karma.conf.js" } }, "defaults": { // 执行`ng generate`命令时的一些默认值 "styleExt": "scss", // 默认生成的样式文件后缀名...常用命令的通用关键参数解释 1.ng serve --host (self) 指定本地Server绑定的域名，默认值：localhost.如果希望使用self来访问你的站点，须加入以上参数 2.ng serve...下面两条等价： ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments

1.6K3 0

Webpack重要知识点

{ "sodeEffects": false } 「副作用」的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个export或多个export。...30kb才进行代码分割 maxSize: 0, // 引入模块大于Xkb时，尝试对引入模块二次拆分引入 minChunks: 1, // 引入模块至被使用X次后才进行代码分割...构建性能常规保持版本最新使用最新稳定版本的webpack、node、npm等，较新的版本更够建立更高效的模块树以及提高解析速度。...避免在生产环境在才会用到的工具某些实用工具，plugins和loaders都只能在构建生产环境时才使用。例如，在开发时使用UglifyJsPlugin来压缩和修改代码是没有意义的。...请注意，在大多数情况下优化代码质量，比构建性能更重要。多个编译时当进行多个编译时，以下工具可以帮助到你： parallel-webpack: 它允许编译工作在woker池中进行。

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭