标签: sass-loader

我已经读过,为了获得源映射,我必须在url('')语句中使用绝对URL .我是这样做的:

body
    background-image: url('/elements/assets/tmp_background.jpg')

当我从css加载器中删除sourceMap选项时,它可以工作,如果我激活它,它就不会.

我想我可能在绝对路径上某处失败了,你有什么想法吗？

这是我的配置文件:

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'elements/main.js'),
  ],
  output: {
    path: 'dist',
    publicPath: '/',  // Prefix for all the statics urls
    filename: 'bundle.js',
  },
  resolve: {
    root: path.resolve(__dirname),
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015',
      },
      { test: /\.css$/,  loaders: ['style', 'css'] },
      { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] },
      { test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap&indentedSyntax=true'] },
      { test: …

我正在使用Webpack 2和webpack-dev-server以及Sass加载器,实际配置:

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}

这非常有效,并且引用的图像background: url()由webpack处理,并且也可以替换为类似的样式background-somehash.jpg,可以通过键入来访问此文件http://localhost:8080/background-somehash.jpg.当我使用开发人员工具在样式背景定义中提供整个URL(包括localhost)时,它也有效...

唯一不起作用的是webpack生成的原始css,看起来像background: url(background-somehash.jpg).我也尝试过各种URL像./,../,../../或./images/尝试,如果根被设置在某种程度上有所不同.我没有得到的是该文件在根目录下可用...

编辑: 当与extract-text-webpack-plugin提取样式一起使用到单独的真实styles.css文件中时,它工作得很好.问题是为什么当从javascript包提供最终的css时它不起作用？

澄清: 一切都正确引用,图像是可用的,它所有的作品,当我使用CSS提取到单独的文件,extract-text-webpack-plugin它只是当完全一样的CSS是每天从不起作用bundle.js这是在当时引用的index.html像<link href="blob:..." rel="stylesheet">

我正在使用 sass-loader 在我的项目中加载我的 scss 文件，并使用 node_modules 解析器，例如： @import '~styleguide/src/vars.scss'

当我尝试加载 react-storybook 时，我将其传递给 webpack.config.js

const path = require('path');
const autoprefixer = require('autoprefixer');

// load the default config generator.
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function(config, env) {
  var config = genDefaultConfig(config, env);

  config.module.loaders.push({
    test: /\.html$/, loader: 'raw'
  });
  config.module.loaders.push({
    test: /\.scss$/,
    loaders: ['style', 'css?sourceMap', 'postcss-loader', 'sass?config=sassLoader']
  });

  config.sassLoader = {
    includePaths: [
      path.resolve(__dirname, '..', 'src/scss')
    ],
    sourceMap: true
  }

  config.postcss = function() {
    return [autoprefixer];
  }

 return config;
};

从我可以从sass-loader …

在使用import语句时,我很难区分sass-loader和css-loader.根据我的知识,css loader解析导入语句(@import),而style-loader适用于在页面上动态注入样式.我也在我的应用程序中使用sass-loader.所以我对sass-loader功能感到困惑.它是否也解析了import语句以及将sass转换为css.在这种情况下,如果我在项目中只使用sass文件,那么我不需要css-loader,因为该工作将由sass-loader完成.我在这儿吗？有谁可以请高亮一点.任何帮助将非常感激

我是Vue（和单个文件组件的概念）的新手，不确定在生成我的应用程序时如何编译CSS。

我有一个模式库，其中为我的项目编译了所有SCSS，因此我想将其放入组件中。我知道我可以全局加载mixin和变量，然后我打算手工挑选其他的sass块（如果需要使用它们来设置该组件的样式）。

我担心的是：

如果我在多个组件中始终使用相同的样式定义，这些样式定义是否会在已编译的CSS中重复？

如果是这样的话。如何避免呢？例如： 我导入10个组件中的“ headings.scss”。编译后的CSS中会有“ headings.scss”文件的10个实例吗？

我希望这是有道理的！这里只需要更多说明即可。

这个问题尚未解决，我在这里需要帮助。救命！

我的问题是：如何使用css-loader设置webpack sass-loader，设置成CSS模块，以防止重复导入？

谁能指出我如何开始解决这个问题？

我正在使用 SASS 尝试 Vue，但我在使用 npm run build 时遇到了一个问题。我使用 webpack sass-loader。有人可以帮我从这里出去吗？我怀疑问题出在我的 webpack 配置中，但我找不到问题所在。

错误输出：

ERROR in ./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header.vue
Module build failed: 
<template>
^
      Invalid CSS after " ": expected 1 selector or at-rule, was "{"
      in /Users/rafrasenberg/webconexus/src/wcxwebsite/src/components/Header.vue (line 1, column 1)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-42a765dc","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header.vue 4:14-355
 @ ./src/components/Header.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

header.vue 文件：

<template>
  <header>
    <div id="logo">UA</div>
    <nav>
      <ul>
        <router-link tag='li' :to="{ name: 'home'}">
          <a>Home</a>
        </router-link>
        <router-link tag='li' :to="{ name: 'cutecat'}">
          <a>CuteCat</a>
        </router-link>
      </ul>
    </nav>
  </header>
</template>

<script>
export default{
  data …

当我尝试使用yarn安装node-sass作为sass-loader反应应用程序的依赖项时，出现以下错误：

yarn add v1.22.0
[1/4] Resolving packages...
warning node-sass > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
error Couldn't find package "error-ex" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

我已经有了最新版本的纱线和 npm。几天前，同样的命令似乎有效。但现在不工作。现在我必须切换到dart-sass而不是node-sass. 我通常在安装依赖项时不指定版本。这个错误与此有关吗？

这是我的依赖项，以防万一：

"dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "normalize.css": "^8.0.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2", …

我决定node-sass从我的 gatsby 项目中删除并使用sass。我遵循了此处针对 v3提到的内容。我删除了node-sass，现在我有这些版本package.json：

"gatsby-plugin-sass": "3.1.0",
"sass": "1.32.5",

我需要能够一次性为全局变量/mixins/函数编写一些 @use 或 @import 规则，以便我可以在所有 scss 文件中使用它们，因此我不必一遍又一遍地重复相同的规则。

有了node-sass这样的工作：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    includePaths: [`${__dirname}/src/styles`],
    data: `@import "globals.scss";`,
  },
},

升级后，该includePaths属性有效但data无效，我从我的 scss 文件中收到有关“丢失”变量的错误：

{
  resolve: `gatsby-plugin-sass`,
  options: {
    sassOptions: {
      includePaths: [`${__dirname}/src/styles`],
      data: `@use 'globals' as *;`,
    },
  },
},

如果我@use 'globals' as *;在每个 scss 文件中插入规则，错误就会消失，一切都按预期工作，但我不想插入这一行并修改我所有的 sass 文件。

我很确定这个问题sass-loader与此声明（文档）有关，但我无法弄清楚如何使其工作以及为什么它以前有效：

?? …

我尝试安装 sass-loader 来编译 scss，但它显示了一个版本兼容性错误。我降级了版本并做了很多事情，但仍然显示相同的问题。

React 版本 - 17.0.2 节点版本 - 16.2.0 npm 版本 - 7.13.0

包.json

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.16.2",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-scripts": "4.0.3",
    "redux-saga": "^1.1.3",
    "web-vitals": "^1.0.1"
  },