标签: sass-loader

有没有办法通过将scss文件中的process.env.NODE_ENV传递给web-pack中的sass-loader来引用它.如果是这样,任何人都知道如何去做？

这是我的webpack模块lodaers数组.

module: {
    loaders: [
      { test: /\.js?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '../app'),
        exclude: /node_modules/
      },
      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        include : path.join(__dirname, '../app', 'images'),
        loader  : 'file-loader?limit=30000&name=[name].[ext]'
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include : path.join(__dirname, '../app', 'fonts'),
        loader: 'file-loader?name=fonts/[name].[ext]'
      }
    ] 

我甚至试过了

      { test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles'),
        options: {
          data: "$env: " + process.env.NODE_ENV + ";"
        }
      }

但上面打破了构建.我只想要一种方法来访问我的scss文件中的URL,具体取决于环境.它不一定是通过webpack,没有硬编码它会有任何想法.例如:

  .contact-transparent{
    width: 100%;
    height: 100%;
    background: url(process.env.NODE_ENV+'/home-background.jpg') …

这里设置的重现性最低:https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

我试图用resolve-url-loader我的scss url()图像路径添加一个hashname ,但我有一点时间让它与webpack 4一起工作.我有一堆图像/static/img/**在我的SCSS中被引用,如:

span.arrow {
  background: url(/static/img/audiences.png);
}

这最终在我的CSS中完全相同(resolve-url-loader找不到它们)

当我通过webpack运行以下配置时,我看到解析加载程序正在找到正确url()的路径,但调试模式是说找不到.

resolve-url-loader: /static/img/audiences.png
  /Users/usr1/webpack_playground/src
  /Users/usr1/webpack_playground/static/img
  NOT FOUND

是否有一些输出配置不正确？我尝试了各种设置组合无济于事:

  loader: 'resolve-url-loader',
  options: {
    debug: true,
    root: path.join(__dirname, './static/img'),
    includeRoot: true,
    absolute: true,
  },

我的最终目标是将文件加载器转换为/ dist散列版本:

span.arrow {
  background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}

// Webpack规则配置

rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader', …

不久前，我制作了一个结合使用 SASS 变量和 CSS 自定义属性的项目。我定义了 Sass 变量，然后使用它们来创建 CSS 自定义属性。一切都很好。现在我试图做同样的事情，使用相同的代码和加载器（Webpack），但它不起作用，我不明白为什么。

我有一个style.scss如下所示的文件：

$var1: #ff3344;
h1 { color: $var1; }
:root { --color1: $var1; }

sass-loader当我使用 Webpack 使用,构建我的项目时css-loader，style-loader我得到以下输出：

h1 { color: #ff3344; }
:root { --color1: $var1; }

由于某种原因， 被$var1替换为 ，h1但未被替换为--color1。

鉴于我之前这样做没有问题，我预计sass-loader可能是原因。但我降级sass-loader到 6.0.7，它与我在项目中使用的版本相同，但我仍然遇到这个问题。为什么在分配给 时不sass-loader替换？$var1--color1

我正在设置我的 Storybook 实例以从我的 Rails 应用程序加载样式，但它无法加载我的main.scss文件中的导入，两者都是来自node_modules以下位置的样式表：

@import 'react-table/react-table.css';
@import 'animate.css';

当我尝试运行我的故事书实例时收到错误：

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './animate.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 4:40-111
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss)
Module not found: Error: Can't resolve './react-table/react-table.css' in '<my_project>/app/javascript/stylesheets'
 @ ./app/javascript/stylesheets/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--9-2!./app/javascript/stylesheets/main.scss) 3:40-127
 @ ./app/javascript/stylesheets/main.scss
 @ ./stories/1-Table.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true …

我有这个问题，即使我睡不着，伙计们

我的代码是这样的

<style lang="scss" scoped>
    @import '~/assets/scss/main.scss'
    .home_nav{
        nav {

        }
    }
</style>

错误是

请有人帮助我

我的Nodejs版本是v16.16.0，npm版本是8.11.0。

并且错误不断出现

有什么办法可以升级 sass-loader 吗？（此外，当 npm runserve 运行时会出现此错误

语法错误：错误：Node Sass 版本 7.0.1 与 ^4.0.0 不兼容。）

我已经阅读了sass-loader和resolve-url-loader描述,但我仍然无法理解为什么sass-loader无法解析sass文件中的图像路径(url).

请帮帮我怎么弄清楚!

process.noDeprecation = true;
module.exports = {
  entry: {
    'main': path.resolve(__dirname, '../main.js')
  },
  devtool: '#source-map',
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, '../../dist'),
    sourceMapFilename: "[file].map"
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'resolve-url-loader' },
            { loader: 'sass-loader', options: { sourceMap: true } },
          ],
          fallback: "style-loader",
        })
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            { loader: 'css-loader', options: { sourceMap: true …

我有点陷入困境，现在我正处于崩溃的边缘。有人请告诉我这里发生了什么。我现在已经玩了大约 4 个小时了，似乎无法找出为什么会发生这种情况！

TL/DR：为什么根据提供的第二个文件webpack找不到我的文件，但可以根据第一个文件解决它？但无论如何它都会解析该文件吗？config.scssincludePathtest.scss

我有以下 webpack 配置：

 //webpack.config.js
 ... unrelated code ...
 module.exports = merge(common, {
     ... unrelated code ...
     modules: {
         rules: [
             {
                 test: /\.s(a|c)ss$/,
                 exclude: /\.module.(s(a|c)ss)$/,
                 loader: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            implementation: require('sass'),
                            sassOptions: {
                                importer: globImporter(),
                                includePaths: [path.resolve(__dirname, './src/main/'), path.resolve(__dirname, './src/main/config/')]
                            }
                        },
                    }
                ]
            }
         ]
    },
    ... unrelated code ...
});

该加载器将加载该 …

我在尝试让 Storybook 读取我的内容时遇到问题.scss。我尝试了许多不同的可能解决方案，但没有一个解决了问题。这是总是弹出的错误：

SassError: SassError: expected "{".\n  \xe2\x95\xb7\n1 \xe2\x94\x82 var api = require("!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");\n  \xe2\x94\x82                                                                                                     ^\n  \xe2\x95\xb5\n

项目中没有 Sass 错误，因为应用程序正常运行并加载样式react-scripts start。

这是我的项目，如果您想重现错误：\n https://github.com/tchesa/virtual-meeting-ui/tree/storybook

\n

确保您在分行storybook

\n

在此示例中，我使用storybook-addon-sass-postcssStorybook 的插件来设置 sass 加载器，但我也尝试sass-loader通过属性推送到 Storybook 的 Webpack webpackFinal，但最终出现了相同的错误。

添加sass-loader到webpack 配置后，使用此节点模块@fontsource/roboto时出现构建错误

import "@fontsource/roboto"; // this is in index.tsx

Uncaught Error: Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* roboto-cyrillic-ext-400-normal*/
> @font-face {
|   font-family: 'Roboto';
|   font-style: normal;
    at eval (index.css:1)
    at Object../node_modules/@fontsource/roboto/index.css (index.js:18)
    at __webpack_require__ (index.js:556)
    at fn (index.js:767)
    at eval (index.tsx:6)
    at Module../src/index.tsx (index.js:62)
    at __webpack_require__ (index.js:556)
    at index.js:1613 …