标签: webpack-style-loader

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 CSS 文件。

从技术上讲，这些主题是 .scss 文件，它们由 webpack 编译并通过 angular 中的标准链接标签加载：

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

我剥离的 webpack 配置如下所示：

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),     
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),     

module.exports = new WebpackConfig().merge({

entry: {
    app: [
        './app/main.ts',
        './assets/sass/themes/theme-1.scss',
        './assets/sass/themes/theme-2.scss'
    ],
},

output: {
    path: "build/",
    filename: "[name].bundle.js",
    publicPath: "/build/"
},

plugins: [
    theme1CssExtractor,
    theme2CssExtractor,
],

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['awesome-typescript-loader']
        },
        [
            {
                test: /theme-1\.scss$/,
                include: path.resolve(__dirname, "assets/sass/themes"),
                loader: theme1CssExtractor.extract(
                    "style",
                    "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib')
                )
            },
            {
                test: /theme-2\.scss$/, …

我有以下Webpack配置(粗略地,它已经简化为这篇文章):

const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');

// ... loaders:

loaders: [
  {
    test: /\.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader?limit=10000&name=[path][name].[ext]'
  },
  {
    test: /\.scss$/,
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
                : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
  }, // ...
]

现在这对于scss文件中正常引用的图像非常适用:

.some-static-class {
  background: url('/images/bg.png');
}

但是,它并没有使用时,工作:local指令:

:local .SomeClass {
  background: url('/images/bg.png');
}

而且我认为那是因为root为CSS加载器定义的.我收到一个构建错误:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

如果我root从css-loader配置中删除,那么它构建正常但在Chrome的检查器中路径"看起来"正确,但是当你在新选项卡中实际打开链接时,它指向:chrome-devtools://devtools/bundled/"/images/bg.png"显然无法正确解析. …

我已从过去的方式切换为不再包含样式表：

<link rel="stylesheet" href="./../css/main.css">

Webpack方法：

var css = require('./../css/main.css');

它可以工作，但是我不喜欢它从该文件中将css提取到内联标签中，因为那样很难在Dev Tools中对其进行调试。例如，我不知道这些属性来自哪个文件和行：

如何将其移动到单独的文件或生成将我指向源文件的源映射？因此，当我检查开发工具时，它将看起来像这样：

我的webpack.config.js：

var autoprefixer = require('autoprefixer');

module.exports = {
    devtool: "css-loader?sourceMap",
    module:  {
        loaders: [
            {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    entry:   [
        './static/js/app.js'
    ],
    output:  {
        filename: './static/js/bundle.js'
    },
    watch:   false,
    postcss: function () {
        return [autoprefixer];
    }
};

我的app.js：

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
    alert('IT WORKS!'); …

内容安全策略 (CSP) 不喜欢 webpack 的样式加载器使用appendChild. 关于如何自定义这些工具以使其协同工作有什么想法吗？

我有多个主题文件,基本上是SASS文件,具有不同的变量,指定特定于每个主题的颜色,字体等.项目中的其余SASS文件在其CSS规则中使用这些变量.

我想以这样的方式配置webpack,它将为每个主题文件生成1个CSS文件.

例如:

main.scss:

body {
  background-color: $theme-specific-color;
}

theme1.scss:

$theme-specific-color: blue;

theme2.scss:

$theme-specific-color: green;

所需的配置将输出2个CSS文件:

theme1.css:

body {
  background-color: blue;
}

theme2.css:

body {
  background-color: green;
}

我目前正在使用ExtractTextPlugin将样式表提取到CSS中.

我有一个最小的webpack设置,并使用sass,css和样式加载器来编译我的项目中的sass.一切正常但我无法理解为什么当我运行时我webpack -p在我的包中得到一些样式加载器函数:

正如您所见,节点模块由于某种原因包含在内,基本上包括style-loader和css-loader.这是正常的吗？这些功能有目的吗？

我正在使用Mini CSS Extract Plugin将 CSS 拆分为distwebpack 项目文件夹中自己的文件。

我的webpack.config.js文件如下所示：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
};

当我 时，这会在我的文件夹中npm run build构建文件，该文件与我的文件夹中的文件相同。我必须包括style.cssdiststyle.csssrc

<head>
  ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head> 

index.html在文件夹的头部，dist …

我正在尝试在iframe中渲染我的React组件。我通过使用库“ react-frame-component”来使其工作。问题在于样式是在“ head”元素末尾的iframe外部加载的。我想更改它以将其加载到“ iframe”元素的“ head”中。我正在使用Webpack生成包含JS和CSS的捆绑软件，并且看到可以通过设置选项“ insertInto”来更改“ style-loader”加载样式的位置，但这会引发错误：

Uncaught Error: Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.

这是我的React组件：

import Frame from 'react-frame-component'
...
ReactDOM.render(
  <Frame id="someId">
    <Provider store={Store.get()}>
      <Container/>
    </Provider>,
  </Frame>,
  document.body
);

这是我在Webpack配置中的“样式加载器”：

{
  loader: 'css-loader',
  options: {
    insertInto: () => document.querySelector("#someId"),
  },
}

我认为问题在于，当webpack尝试包含样式时，该组件未呈现。如何解决呢？

因为我正在使用Webpack捆绑我的CSS并且我的脚本标签位于我的HTML底部,在初始页面加载时我得到了页面的内容而没有任何样式.

然后,当脚本开始播放时,突然出现了样式.

Webpack对于帮助捆绑CSS非常有用,但是这种行为非常令人不安,并且不太可接受.

解决这个问题的常用方法有哪些？

我的app.scss

.tes {
    color: red;
}

执行时输出错误 ./node_modules/.bin/webpack

ERROR in ./~/css-loader!./~/sass-loader?indentedSyntax!./www/assets/app.scss
Module build failed: 
.tes {
     ^
      Invalid CSS after ".tes {": expected "}", was "{"
      in ./www/assets/app.scss (line 1, column 7)
 @ ./www/assets/app.scss 4:14-135 13:2-17:4 13:2-17:4 14:20-141

我的 webpack.config

 module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style!css!sass?indentedSyntax'
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }, {
                test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
                loader: 'file-loader?name=res/[name].[ext]?[hash]'
            }
        ]
    },

和我的 app.js

require('./www/assets/app.scss');

var angular = require('angular');
var uiRouter = require('angular-ui-router');
require('velocity-animate');
require('node-lumx');

var HomeController = …