标签: css-loader

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

<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!'); …

我将此配置用于我的webpack 2

        {
            test: /\.css$/i,
            use: ExtractTextPlugin.extract({
                use: 'css-loader?minimize'
            })
        }

如何根据字符串模式删除所有注释？我使用它但不起作用

  'css-loader?minimize&{discardComments:{removeAll:true}}'

谁能帮我 ？

我的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 = …

我很难在我的JSX文件上使用css-loader获取CSS加载.我跟随的例子来自:

https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html

这是我的JSX

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css';
class Hello extends React.Component {
  render() {
    return <div>Hello world!</div>
  }
}

var el = document.getElementById('content')
var data = JSON.parse(el.getAttribute('data-attr'))
ReactDOM.render(<Hello data={data} />, el);`

这是我的package.json

  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "exports-loader": "~0.6.2",
    "expose-loader": "~0.6.0",
    "grunt": "^0.4.5",
    "grunt-babel": "^6.0.0",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-webpack": "^1.0.11",
    "history": "^1.17.0",
    "imports-loader": "~0.6.3",
    "jquery": "^2.1.4",
    "lodash": "~3.0.0",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-router": "^1.0.3", …

我postcss-import用来处理我的进口，并cssnano缩小。在我的 Webpack 配置中，我一直在使用以下设置css-loader...

{
  loader: 'css-loader',
  options: {
    url: false,
    import: false,
    minimize: false,
    importLoaders: 1,
    souceMap: true,
  }
}

...但是当我删除所有内容时似乎仍然可以正常加载，所以现在我post-css之前只有style-loader. 我可以安全地css-loader从我的 css 构建中省略，还是它提供了一些其他必要的功能？我还没有看到一个webpack.config.js不使用的文件css-loader，所以我想在这里保持谨慎！:)

# 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(
  <BrowserRouter>
    <Switch>
        <Route exact path='/mycomponent' component={MyComponent}/>
        <Route component={PageNotFound} />
      </Switch>
  </BrowserRouter>,
  document.getElementById('root'));

当我去/mycomponentMyComponent 渲染它的 css 时。但是当我转到任何其他 url 时，仍然可以在 html 的 Head 中看到 MyComponentStyle.css。有没有办法仅在组件在其路由上呈现时呈现相应组件的 CSS？

我在一个项目中使用 Webpack 4，到目前为止我只需要编译和捆绑样式。没有 Javascript。

这是我的配置：

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

module.exports = {
  entry: {
    'css/bundle': path.resolve(__dirname, 'static/scss/index.scss'),
  },
  output: {
    path: path.resolve(__dirname, 'static'),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        include: path.resolve(__dirname, 'static/scss'),
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
};

问题是它输出了两个文件：bundle.css 和 bundle.js。有没有办法配置 Webpack 使其不输出 Javascript 包？我试图浏览文档，尝试了十几种不同的东西，但它并没有真正奏效。

这里的一个重要注意事项是，如果我删除 css-loader，捆绑将失败。因此，虽然 css-loader 最有可能负责输出 bundle.js 文件，但我不完全确定如何避免使用它。

create-react-app 3.4.1出于测试/学习的目的，我使用的是 附带的弹出版本css-loader 3.4.2，并且我尝试重现这些结果，其中 css 选择器以短横线大小写编写，但 js 样式对象将它们转换为驼峰命名法：

样式.css

.foo-baz {
  color: red;
}
.bar {
  color: blue;
}

索引.js

import styles from './styles.css';

console.log(styles);
// expected result: { fooBaz, bar }
// actual, default results: { foo-baz, bar }

根据3.0.0 版本中的css-loader变更日志：

exportLocalsStyle选项被删除以支持localsConvention选项，它也只接受值（如果您之前的值是并且如果您之前的值是，则{String}使用值）'camelCase'true'asIs'false

所以我尝试这样做：

webpack.config.js

...
{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    localsConvention: "camelCase", // my only addition …

我正在构建一个反应应用程序。

我将滑块导入到文件中，然后得到了一个css-loader. 我正在使用网络包。

这是我的滑块：

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 <RubberSlider width={250} value={value} onChange={setValue} />
}

这个 ^ 将进入另一个组件并被调用。

当我评论出来时一切都很好

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 <RubberSlider width={250} value={value} onChange={setValue} />
}

但我需要这些样式的滑块，当我运行 Webpack 命令时，出现此错误：

import styles from …

我在两台不同的 PC 上遇到了一个问题。对于我的项目，我为开发安装了以下依赖项：（webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader html-webpack-plugin）和反应和反应-dom。当我尝试在我的项目的任何组件中导入一些样式表时，问题就出现了，错误是：import api from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; . 我有点困惑，因为我检查了很多次自己完成的其他 webpack 配置，它们与我现在使用的相同。你的建议是什么？谢谢！