在使用 angular-cli@1.0.0-beta.21 进行 ng build -prod 时无法找到 css-loader 模块。
我有以下package.json配置 "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/router": "3.2.1", "@angular2-material/button": "^2.0.0-alpha.8-2", "@angular2-material/button-toggle": "^2.0.0-alpha.8-2", "@angular2-material/card": "^2.0.0-alpha.8-2", "@angular
6 2024-02-22
编程技术问答社区
从 "css-loader!./test.css "导入测试,返回字符串
前言 我知道WebPack,Babel,Loaders及其交互方式接近零. 问题描述 我开发了一个角度组件库,该库最近迁移到Angular 12.我目前正在设置文档的故事书. 我想使用故事书插件在不同的CSS样式表之间切换. 通过此插件的文档,我发现了有关WebPack Loader语法的文档,尤其是对于懒惰的样式表,即. import test from "!!style-loader?injectType=lazyStyleTag!css-loader!./test.css" 但是,在浏览器控制台中,我得到Unhandled Promise rejection: file.use is not a function. 我发现,我的主要问题与故事书无关,因为即使是简单的css-loader导入URL返回普通字符串而不是对象. 我花了几天时间分析这个问题,但是我真的处于智慧. 环境 nodejs 14.17.6 打字稿4.3.x
12 2024-02-22
编程技术问答社区
在JavaScript/TypeScript文件中使用[hash:base64:5]。
我正在使用WebPack的Angular项目中使用CSS模块. 我已经用.css和.scss文件中的类名称使用 postcss-modules . 然后使用 posthtml-css-modules 我已经改变了类属性的值在HTML元素中,其哈希值由postcss-modules定义. 定义 我可以说一切正常. 现在,我有一个新的挑战要解决. Angular,具有一个功能,可以使您在HTML元素中动态更改class的值,具体取决于条件: https://angular.io/api/api/common/common/ngclass 例如,我可以做: 如果myVar = true,HTML元素将是: ,如果myVar = false,则HTML元素将是:
6 2024-02-21
编程技术问答社区
webpack在webpack.config.js文件中出现 "模块构建失败:未知词 "的故障
WebPack尝试使用CSS-Loader添加CSS时对我不起作用. OS:Windows 10 Pro, Webpack:4.8.0 节点:8.9.4 NPM:6.0.0 CSS-loader:0.28.11 样式加载器:0.21.0 package.json { "name": "webpack-dev", "version": "1.0.0", "description": "", "main": "index.php", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./src/app.js" }, "keywords": [], "author": "", "license": "ISC", "de
12 2023-12-11
编程技术问答社区
如何在字符串模式下用webpack 2的CSS Loader删除所有评论?
我将此配置用于我的WebPack 2 { test: /\.css$/i, use: ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) } 如何根据字符串模式删除所有注释? 我使用它,但不起作用 'css-loader?minimize&{discardComments:{removeAll:true}}' 任何人可以帮我吗? 解决方案 您可以使用Optimize-css-assets-webpack-plugin删除注释:其他解决方案 也可能继续前进并在其中添加Sass.这是我们的配置. const style_loader = ExtractTextPlugin.extract({ fallback: 'style-loader', us
12 2023-12-01
编程技术问答社区
React: 仅在渲染组件时加载组件的 CSS
# MyComponent.js import React from 'react' import './MyComponentStyle.css' export default class MyComponent extends React.Component { .... } # App.js import React from 'react' import ReactDOM from 'react-dom' import { Route, Switch, BrowserRouter } from 'react-router-dom' import MyComponent from './MyComponent' import PageNotFound from './PageNotFound' ReactDOM.render(
10 2023-12-01
编程技术问答社区
如何使用Webpack 5为动态多页面应用程序(成功)捆绑css
我正在尝试使用WebPack 5将资产用于动态多页Django应用程序.使用WebpackManifestPlugin和django-manifest-loader.我对JavaScript的工作正常,但是我尝试了我可以找到的所有技巧,并且无法使其适用于CSS. 我创建了一个CSS文件,用于用作入口点,并且(为了获得概念证明)将应用程序的CSS文件中的1个导入到其中.从该文件产生的输出文件实际上是空的.如果我将任何规则直接添加到条目.CSS文件中,则显示在输出文件中的那些规则,但是@import …已消失,而导入文件的规则不存在. 顺便说一句,如果我故意将文件误为导入中,则捆绑失败,因此我认为导入的CSS正在正确识别和处理,然后省略.根据我完成的一些读数,我添加了sideEffects: true(请参阅下面的django/webpack.config.js目录),但这并没有更改结果. 有建议吗?我已经把头发撕了近2天了. django/ui/src/index.
4 2023-12-01
编程技术问答社区
Webpack Less-Loader与Style-Loader没有注入<style>标签
我试图通过less-loader拾取我们的.LESLE文件,然后由css-loader,最后将style-loader>注射到HTML文件中,根据更少的加载程序文档. 我没有遇到任何错误或警告,但是样式没有以任何方式注入或存在. 我的webpack配置如下,在module.rules [] ...下: { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS
18 2023-12-01
编程技术问答社区
webpack:获取此错误:构建失败(来自./node_modules/css-loader/dist/cjs.js):
运行WebPack时,我会收到以下错误: ./src/css/main.css 3.62 kib {0} [不可填充] [构建] [失败] [1错误] 错误 模块构建失败(来自./node_modules/css-loader/dist/cjs.js): ... 累加器[normolizedUrl] = {...累加器[normolizedUrl], ^^^ ... webpack.config.js: module: { rules: [ { test: /\.css$/i, use: ['css-loader'] } ] } CSS: body { background-color:purple; } JS: import css from '../css/main.css'; 在JS文件上,如
14 2023-12-01
编程技术问答社区
我使用 react-create-app,但出现了以下错误 => ./src/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref-5-oneOf-4-1)
我正在为一个项目使用create-react-app,直到今天早上都很好(字体也不是问题). 我通过运行npm start => 遇到了这个错误 ./src/index.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Error: Can't resolve './fonts/Plain-Medium.otf' 我试图重建css-loader并重新安装webpack但没有成功. 有人知道这可能来自哪里吗?预先感谢. 解决方案 css-loader中有错误. 其他解决方案 您可以在不公开/ 中的src/文件夹中使用该图像 它可以解决我的尽头,我希望它对您有帮助 谢谢.
22 2023-12-01
编程技术问答社区
VUE范围示范样式:WebPack 5&CSS-Loader 4
我正在将VUE应用程序升级到WebPack 5和CSS-Loader 4(或5).我使用带有和标签的单文件组件.我的少数组件使用示波器样式:. 自升级到WebPack 5和CSS-Loader 4以来,我的VUE组件的范围范围已被WebPack完全跳过(据我所知). 我当前的配置看起来像这样: { module: { rules: [ // ... other rules omitted here { test: /\.scss$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true } }, 'sass-load
14 2023-12-01
编程技术问答社区
卸载/删除动态加载的css文件
加载这样的CSS文件后: const themes = ['dark-theme.css', 'light-theme.css']; async function loadcss(file) { return await import(file); } loadcss(themes[0]).then(console.log) 控制台输出是我的一个空对象,而我的index.html的位于我的中.到目前为止,一切都很好,但是如果我(在此示例中)想将主题更改为 light-theme.css .这将合并两个主题,因为 dark-theme.css 已经加载了. 有没有办法删除 the dom的标签? 进一步指定了我的问题,提供的示例显示了一个抽象的行为,我只想从DOM中删除动态加载的CSS. 解决方案 我不知道vue.js,但这是一个简单的示例. class TodoApp extends React.Component { static theme
16 2023-12-01
编程技术问答社区
Webpack将CSS加载到单个<style>标签中
我目前正在使用以下WebPack配置来导入和解析我在React组件中进行的SCSS导入. 我问题的症结在于配置的CSS部分.当前,我正在使用其相关的React组件中使用其绝对文件路径导入SCSS文件.但是,在渲染上,每个CSS导入都会获得自己的标签,这会导致在我的Web应用程序的头部散布的十几个标签.有没有办法调整配置,以使输出的CSS进入一个单个标签?也许请按照以下方式进入我的应用程序的反应加载序列: entry: { app: [ '
8 2023-12-01
编程技术问答社区
修改 localIdentName / getLocalIdent 的输出结果
我正在开发一个小部件,该小部件可以嵌入在"任何"网站上,并使用CSS-loader给我的CSS级独特名称避免冲突. 在我的webpack.config.js中,我有以下行: localIdentName: 'productname-[folder]-[local]', 此输出类别为: productname-src-widgetbox productname-sidebar-sidebar 是否可以从classNames中删除所有" -src"并较低的所有内容? 我找到了一个解决方案,我刚刚复制了整个原始的getLocalident(),然后parde repent a替换()和tolowercase()方法.但这不是一个很好的解决方案,我认为: const getLocalIdent = (loaderContext, localIdentName, localName, options) => { if (!options.contex
10 2023-12-01
编程技术问答社区
模块构建失败(来自./node_modules/css-loader/dist/cjs.js): CssSyntaxError
我正在构建一个React应用程序. 我将滑块导入到文件中,然后我得到了css-loader.我正在使用webpack. 这是我的滑块: import React, {useState} from 'react'; import RubberSlider from '@shwilliam/react-rubber-slider'; import styles from '@shwilliam/react-rubber-slider/dist/styles.css'; export const Slider = () => { const [value, setValue] = useState(0.5) return } 这个 ^将进入另一个组件并被调用. 当我发表评论时,一切都很好 import styles from
14 2023-12-01
编程技术问答社区
无法在 .tsx 文件中导入 CSS 模块
我正在用打字稿构建基本的React应用程序,但我无法在 index.tsx 文件中导入CSS文件 我能够以按照方式导入 index.css 文件: import './index.css'; //this import gives typescript error when running webpack ,但无法导入为 import * as Styles from './index.css'; 这是我的 webpack.config.js 文件 var path = require("path"); var HtmlWebpackPlugin = require('html-webpack-plugin') var config = { mode:"none", entry:"./src/index.tsx", output:{ path: path.resolve(__dirname,"dist"),
10 2023-12-01
编程技术问答社区
webpack Can't resolve 'style';
我试图从( http://http://webpack. github.io/docs/tutorials/getting-started/). 当我尝试加载style.css时,我会遇到此错误. ./entry.js中的错误 找不到模块:错误:无法在我的计算机中的"项目路径"中解析"样式" 打破变化:使用加载器时,不再允许省略" -loader"后缀. 您需要指定"样式加载程序"而不是"样式". @ ./entry.js 1:0-22 有什么想法? 我使用教程中解释的MPM在本地安装了CSS-Loader和样式加载程序. NPM安装CSS-Loader style-loader 我看到安装后创建的节点模块文件夹. 解决方案 webpack版本> = 2.0 更新webpack.config.js module.exports = { entry: "./entry.js", output: { path: __
22 2023-12-01
编程技术问答社区
如何在 Webpack 配置文件中设置 CSS 名称不为哈希值?
我只是想知道为什么我的CSS名称 hash 在我构建和运行React + 这是我的webpack配置: var webpack = require('webpack'); var path = require('path'); module.exports = { entry: './app/app.jsx', output: { path: __dirname, filename: './public/bundle.js' }, resolve: { alias: { applicationStyles: path.resolve(__dirname,'app/styles/app.css'), Clock: path.resolve(__dirname,'app/components/Clock.jsx'), Countdow
4 2023-12-01
编程技术问答社区
Webpack中的相对CSS urls
webpack + file-loader + sass-loader难以解决CSS背景图像的相对路径. 编译的SCSS文件包含有关/dist/而不是相对于SCSS/CSS文档的背景图像的路径.我研究了这个问题; Sass-Loader建议使用Resolve-url-Loader(带有源地图).但是,添加Resolve-url-Loader对编译的CSS没有任何影响. 我能够通过将" publicPath"设置为" ../.."上的" publicpath"来解决问题.或通过在CSS-Loader上禁用" URL"设置.也不是一个好的解决方案,并且会引起复制文件和通过HTML或其他来源引用图像的问题. WebPack和CSS的在线示例将CSS和图像放在同一文件夹中(通常在根中).对于我的WebPack实现而言,这不是一个最佳选择.在子文件夹中构造文件的概念似乎是一个相当基本的要求.这只是错误的方法吗? 运行webpack ^3.5.1. sass-loader ^
10 2023-12-01
编程技术问答社区
css-loader 无法导入 .css 文件,返回空对象
从CSS文件中导入样式.返回空对象.似乎CSS-loader无法正常工作.谁可以帮我这个事.请在下面找到参考文件 index.js import React from 'react' import style from './header.css' console.log(style) // Returning empty object export default class Header extends React.PureComponent { render() { return( This is header component ) } } ./header.css .header { background: #007DC6; } ./webpack.config.js { t
18 2023-12-01
编程技术问答社区