我即将为我的公司创建一个模式库.我使用以下软件:
在我的电脑上(Windows 10).
我的目标是使用该@import "colors"语句并获取相应的文件../patterns/globals/_colors.css.我创建了一个存储库,以简化代码向您展示我的情况:https://github.com/jbrieske/webpack-sass-fail.我尝试includePaths使用属性配置sass-loader和resolve-url-loader root.但到目前为止两者都没有...
在我的第一次运行(提交:14622da5e6eb77ec51644601b94942c3b51eb76a)与sass-loader和includePaths我得到以下错误报告:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.2
Time: 522ms
+ 1 hidden modules
ERROR in ./styles.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./colors in ~/projects/webpack-sass-fail/app
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/Compilation.js:229:38
at onDoneResolving (~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:29:20)
at ~/projects/webpack-sass-fail/app/node_modules/webpack/lib/NormalModuleFactory.js:85:20
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:726:13
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:52:16
at done (~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:241:17)
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:44:16
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:723:17
at ~/projects/webpack-sass-fail/app/node_modules/async/lib/async.js:167:37
at ~/projects/webpack-sass-fail/app/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:24:19
at …我只是想知道为什么我的 css 名称在我构建并运行我的 react + webpack 应用程序后变成了哈希。是否有我可能错过的高级配置以正常设置 css 名称？
这是我的 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'),
Countdown: path.resolve(__dirname,'app/components/Countdown.jsx'),
CountdownForm: path.resolve(__dirname,'app/components/CountdownForm.jsx')
},
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
} …我正在尝试设置React组件的样式。为此，我导入一个css文件并使用className，如ReactJs文档中所示。
我已经在我的webpack.config.js文件中添加了一个css-loader + style-loader，如下所述：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: "../src/index.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js",
},
devtool: 'inline-source-map',
devServer: {
contentBase: '../dist',
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin(
{template: '../src/index.html'}
)]
}
这是我的App.js React组件：
import …我有以下组件，导入的 css 和 webpack 配置 - 显然我已经导入了相关的 css 模块，但是我的 react 输出className={css__main.container}和导入的 css-loader之间的连接似乎不是由 react 建立的 - css_main.container 没有映射to .main__container___2MJY（它返回undefined，因此 react/webpack 不包含在输出中）-我敢肯定，我是 css 模块的新手，我刚刚错过了一个步骤，有人能指出它可能是什么吗？（"css-loader": "^0.28.11"安装在 package.json 中）。
import React from 'react';
import {Route, browserHistory, Switch, Link, BrowserRouter, HashRouter} from 'react-router-dom';
import css__main from "../css/main.css";
import NoMatch from "./no-match.js";
import ButtonLink from "../components/buttonLink.js";
import List from "./lists/list-base.js";
import Home from "./subs/home.js";
class Main extends React.Component {
render(){
console.log( JSON.stringify( css__main ));
//[["./src/css/main.css",".main__container___2MJY_{border:1px solid #d0d0d0;-moz-box-shadow:0 0 8px …我试图按照这里的教程https://webpack.js.org/guides/asset-management/ 但是我永远无法加载 css 文件。（文字从不红色）
https://github.com/bryandellinger/webpackassetmanagement
> --dist
> ----bundle.js
> ----index.html
> --src
> ----index.js
> ----style.css
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
};
包.json
{
"name": "webpack1",
"version": "1.0.0",
"description": "webpack tutorial",
"private": true,
"scripts": {
"dev": "lite-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"style-loader": "^0.22.1", …下面是我的webpack.config.js和package.json
module.exports = {
entry: "./entry.js",
output: {
filename: "./build/js/bundle.js"
},
module: {
rules: [
{
test: /.\js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["es2015"]
}
}
]
},
{
test: /.\css?$/,
include: __dirname + "./src/css",
exclude: __dirname + "./src/js",
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
},
plugins: [
// new UglifyJsPlugin()
]
}
"dependencies": {
"ajv-keywords": "^3.1.0",
"ajv": "^6.0.0",
"axios": "^0.17.1",
"babel-minify-webpack-plugin": "^0.3.0",
"extract-text-webpack-plugin": "^3.0.2",
"install": "^0.10.4",
"npm": …我正在使用支持 Webpack 的 CSS 模块（通过 css-loader）构建一个小型 Web 应用程序，但不使用React。我的目标是通过使用 css-loader 上的选项，在 HTML 中获得简短、模糊的 CSS 类名（因为我目前使用冗长的 BEM 类名）的好处localIdentName: '[hash:base64:8]'。由于我没有使用 React，所以我正在使用原始 HTML，该 HTML 不是通过JSX 文件或document.write.
我之前在 React 中使用过很多次 css-loader ，它最终是有效的，因为你可以在 React 文件中导入样式类名，并使用人类可读的名称来引用它们，无论类名发生什么变化通过Webpack。
但是，我很困惑在使用原始 HTML 时如何处理这个问题；我不能只导入样式，因为它不是 JS 文件。如果我的 HTML 中有一个名为引用的类photo__caption--large，并且 webpack 将类名转换为d87sj，则 CSS 文件会显示为d87sj，但 HTML 仍会显示为photo__caption--large。
是否有某种 HTML 文件加载器能够将文件中的类名编辑为其 Webpackified 等效项？或者我真的应该只使用 React 和 CSS 模块吗？
css bundling-and-minification webpack css-modules css-loader
我一直在尝试在 next.config.js 中使用 sass 和 css 模块，但不断遇到此错误：
Failed to compile.
./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css
Unknown word (1:1)
> 1 | var api = require("!../../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!../../../../../../css-loader/index.js!./index.css");
3 |
4 | content = content.__esModule ? content.default : content;
在 github 和 stackoverflow 上阅读之后，这听起来像是因为我的 next.config.js 中有两个 css 模块配置实例，但我不确定如何将其减少到一个，同时仍然保持此逻辑不变：
config.module.rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
下面是我完整的 next.config.js
const path = require('path');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const aliasPathsToResolve = [ …我正在使用 Webpack 5 将 SCSS 编译为 CSS。我想有选择地内联一些 SVG。理想情况下，我想通过文件名、路径或其 URL 中的某些查询参数来实现此目的。
假设我有以下 SCSS：
/* src/scss/main.scss */
.logo {
background-image: url('/images/logo.svg');
}
和这个webpack.config.js：
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const src_dir = path.resolve(__dirname, "src");
module.exports = {
entry: {
"styles": path.resolve(__dirname, "src/scss/main.scss")
},
output: {
clean: true,
path: path.resolve(__dirname, "dist"),
publicPath: "",
},
module: {
rules: [ ... ]
},
plugins: [
// Extract the generated CSS from the JS-CSS into actual CSS.
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
}), …我有一个 webpack 项目，我需要在 css 中通过url(). 在其他地方，我想导入图像并在我的 JS 代码中使用它们，所以我使用file-loader. 我的webpack.config规则如下（请注意，我不使用 SASS）：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.(m|c)?jsx?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
},
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: 'file-loader',
options: {
esModule: false
}
}
},
{
test: /\.svg$/i,
use: {
loader: 'file-loader', …css-loader ×10
webpack ×9
reactjs ×3
css ×2
javascript ×2
sass ×2
sass-loader ×2
css-modules ×1
hash ×1
next.js ×1
webpack-5 ×1