标签: webpack-style-loader

./app/index.scss中的错误找不到模块:错误:无法解析C:\ Users\johnliang\Temp\webpack-angular中的'file'或'directory'./../node_modules css-loader/index.js/app @ ./app/index.scss 4:14-116 13:2-17:4 14:20-122

./app/index.scss中的错误找不到模块:错误:无法解析C:\ Users\johnliang\Temp\webpack-angular中的'file'或'directory'./../node_modules style-loader/addStyles.js/app @ ./app/index.scss 7:13-68

index.scss未加载到最终的webpack输出中.

我遇到了一个问题,我需要在由Webpack构建的React应用程序上运行Jest测试.问题是处理requireWebpack通常用加载器处理的CSS文件和图像等.我需要知道正确测试组件的最佳方法是什么.

React组件:

import React from 'react';
// The CSS file is the problem as I want to actually test what it
// returns after webpack has built it.
import style from './boilerplate.css';

var Boilerplate = React.createClass({
    render: function() {
        return (
            <div>
                <h1 className={style.title}>react-boilerplate</h1>
                <p className={style.description}>
                    A React and Webpack boilerplate.
                </p>
            </div>
        );
    }
});

export default Boilerplate;

开玩笑测试:

jest.dontMock('./boilerplate.js');

var Boilerplate = require('./boilerplate.js');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;

describe('boilerplate', function() {

    var component; …

我想在我的开发设置中使用带有功能的css-loader:local().

没错误: import './sidebar.css';

它编译没有问题,但后来我不知道如何访问我的.tsx文件中的本地类名.

错误: import classNames from './sidebar.css';

我得到: error TS2307: Cannot find module './sidebar.css'

解释我的设置:

1. .tsx 通过gulp-typescript(ES5)将文件编译为commonjs模块
2. commonjs模块通过webpack编译和缩小为JS

sidebar.tsx(app.tsx如果重要则导入

import classNames from './sidebar.css';

sidebar.css

.sl-sidebar {
  background-color: yellow;
}

gulpfile.js

Gulp任务编译.tsx文件到commonJS模块(当然在webpack-task之前运行):

gulp.task('gui-tsx', function () {
    return gulp.src(config.guiTsxPath + '**/*.tsx')
        .pipe(ts({
            jsx: 'react',
            outDir: config.guiCompiledPath,
            module: 'commonjs',
            target: 'ES5'
        }))
        .pipe(gulp.dest(config.guiCompiledPath));
});

我的gulp-webpack任务:

gulp.task('gui-webpack', function () {
    webpack({
        bail: false,
        debug: true,
        entry: './' + config.guiCompiledPath + 'app.js', …

好的，我已经使用 Webpack 导入了一个 css 文件，style-loader如下css-loader所示：

import './style.css'

Webpack 通过style标签将其附加到我的页面。到目前为止，一切都很好。但是，当应用程序的状态发生变化时，我想删除这种特定的样式。当然，我可以使用 删除它document.querySelector('style')，但是有一些自然的 Webpack 方法可以做到这一点吗？

提前致谢。

我想在运行命令时进行热重新加载npm run watch.(我希望它在使用vue-cli时工作- 当你运行npm run dev命令时:https://vue-loader.vuejs.org/en/features/hot-reload.html).

所以,我已经安装了webpack-dev-server,这就是我尝试过的:

package.json:

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack",
    "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "node-sass": "^4.5.2",
    "purifycss-webpack": "^0.6.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "webpack": "^2.4.1", …

我正在使用一个节点库，其中包含一个css文件，该css文件加载这样的图像

background-image: url("image.png");

在http：// localhost：9000 /处请求文件“ image.png” （根目录）很脏，无法在项目的整个根目录中包含图像。

另外我还有另一个问题，我不知道为什么模块的图像文件没有自动复制到构建文件夹，仅当我手动将图像文件复制到构建文件夹时才起作用。使用Webpack配置参数时，我正在使用该功能将映像复制到根目录，但是它为它们添加了随机名称，因此我不想在根目录中使用它们。

我希望将所有加载的图像复制到带有原始文件名的build文件夹内的“ img”子文件夹中，并在此处进行请求，因此根目录不会弄脏那里的所有文件。

这是我的webpack配置文件：

var webpack               = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');

"use strict";
module.exports = {
    entry:   "./source/typescript/Main.ts",
    output: {
        filename: "./js/bundle.js"
    },
    devtool: "inline-source-map",
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000,
        open: true
    },
    module: {
        rules: [
            {
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            url: false
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: …

我正在尝试使用一系列加载器将所有SCSS文件解压缩到一个文件中ExtractTextPlugin.在我拥有的一系列加载器中,我正在使用autoprefixer内部使用的插件postcss-loader.但是,似乎没有任何前缀!

我的webpack配置如下:

webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
  context: __dirname,
  entry: {
    app: [
      path.resolve(entrypath),
    ],
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer()]
              }
            }
          ]
        }),
      },
    ],
  },
  output: {
    path: path.join(__dirname, '../app/assets/javascripts/generated/'),
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'compiled-draft-document-scss.css',
      allChunks: true
    }), …

webpack 有没有办法自动内联样式？

例如，使用一些示例 CSS，

.example { 
    font-size: 2em 
}

以及组件内的一些 HTML，

class Example extends React.Component {
    render() {
        return <div className={css.example} />
    }
}

我希望 webpack 输出： <div style="font-size: 2em;" />

我的应用程序中的样式具有以下结构：

应用

- css/
   - bootstrap/
      - boostrap.less -> has (@import "another.less")
      - another.less
   - common/
      - common.less
   - entries/
      - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less")
      - common.js -> has (import common from "../common/common.less")

现在我需要从导入到条目 bootstrap.js 和 common.js 的样式中创建单独的 CSS-es。

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

包.json

{ …

我有一个 Vue.js 项目，使用 Vue UI 和 Webpack 项目，使用路由器用于多个“页面”。我正在使用 SASS (SCSS) 部分并将它们导入到各个组件中。

<style lang="sass">
@import "@/css/modules/_style-guide.scss";
</style>

在每个“页面”上，SASS（实际上是渲染的 CSS）被加载到所有组件的头部的 DOM 中，即使它们没有被导入到“页面”中。

添加“scoped”选项仍会加载所有 SASS 文件，只需添加唯一的 guid。

我宁愿仅在“页面”上存在组件时才导入 SASS。

有没有办法做到这一点？