标签: sass-loader

我想将一个特定的选择器全局附加到我的应用程序中使用的所有 CSS 选择器。

我正在使用 React 和那些 Webpack 加载器post-css、css-loader和sass-loader。extract-text-webpack-plugin

我不想编辑 jsx 文件中的所有类名。我只想在构建时附加这个特定的选择器。

有没有一个加载器可以实现这一点？或者任何其他解决方案...

我实际拥有的：

.myClass {
  ...

  &--blue { ... }
}

Webpack 转译后我想要的：

.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }

谢谢

戈蒂埃

PS：我需要此功能的原因是为了避免 CSS 选择器与我正在集成应用程序的网站发生冲突。我不想手动编辑所有 scss 文件来附加选择器。

我想在 webpack.config.js 上定义全局变量或 env 并将变量传递给 .js 或 .scss 文件

我定义“__basedir”是绝对路径

      new webpack.DefinePlugin({
          __basedir: "'" + __dirname + "'",

      }),

Run Code Online (Sandbox Code Playgroud)

  {
        loader: 'sass-loader',
        options: {
            data: "$basedir: '" + __dirname + "';"
        }
    }

在js文件上已经可以工作了

require(__basedir + '/public/js/Sortable.min.js');

但在 scss 文件上它不起作用

@import“$__basedir/public/css/include-media/dist/_include-media.scss”；

怎么修。谢谢

基本上我试图在容器的背景中显示图像，但它没有加载。我尝试了各种路径，因为我并不完全清楚 URL 需要相对于什么： the package.json、 the webpack.config.js、 React 组件或login.scss我正在使用的。

除了以下内容之外，我还将提供目录结构webpack.config.js：

/app\n    /src\n        /assets\n            /img\n                slide_blue.png\n            /scss\n                login.scss\n        /config\n            webpack.config.js\n        /react\n            /containers\n                /authentication\n                    signin.js\n            index.js // entry point\n    package.json\n

login.scss到目前为止，它很短，其他样式也有效：

// logic.scss\n@import \'declarations\';\n\n.login {\n    height: 381px;\n    // tried just about every combination of path... this is just the last one I tried\n    background-image: url(\'/src/assets/img/slide_blue.png\') !important;\n\n    form {\n        padding-top: 75px;\n        padding-bottom: -75px;\n    }\n}\n

最后是webpack.config.js：

var path = …

.css我正在为和文件设置 Webpack 加载器配置.scss，我注意到在使用时--mode production我将最小化的 CSS 作为最终输出，甚至没有显式使用最小化器，这是我的加载器配置：

{
  // Match .css or .scss
  test: /\.s?css$/,
  use: [
    isProd
    // In production extract the CSS into separate files
    ? {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProd
      }
    }
    // In development inject the styles into the DOM
    : 'style-loader',
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: false
      }
    }
  ]
}

我正在使用sass-loaderwithnode-sass和mini-css-extract-plugin将CSS提取到单独的文件中，这建议使用optimize-css-assets-webpack-plugin通过覆盖来最小化CSS optimization.minimizer，但我已经在不安装此插件的情况下获得了最小化输出。

为了找出导致此行为的原因，我尝试处理有或没有 CSS …

太长了；滚动到底部寻找答案，或者将 Webpack 和 Dart Sass VM 结合起来。 https://github.com/sass/dart-sass/releases/

不确定其他人是否遇到过这个问题，但我在观看文件时的第一次保存可能需要 6-7 秒（6720 毫秒）。

然后它通常会下降 2-3.5 秒。

我正在使用 Webpack 5，最新版本sass-loader和sass. 我还Fibers按照 Webpacks 的建议添加了内容，但我确实没有看到任何改进。

我的 JS 编译时间不到一秒。

我也尝试过两者memory并filesystem在 Webpack 缓存中进行设置。我也尝试过cache-loader。

我当前的 SCSS 规则如下所示：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Fiber = require('fibers');
const Sass = require('sass');
const config = require('../app.config');

module.exports = {
    rules: [{
        test: /\.s[ac]ss$/,
        exclude: /node_modules/,
        include: config.paths.sass,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: …

我正在使用 Nuxt 2.15.4 和 nuxt/vuetify 1.11.3

我的项目工作正常，但是当我在构建时将其移至新服务器时，出现以下错误：

这是我的 package.json 文件

{
  "name": "myproject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/google-gtag": "^1.0.4",
    "@nuxtjs/gtm": "^2.4.0",
    "chart.js": "^2.9.3",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.9.1",
    "jquery": "^3.5.1",
    "nuxt": "^2.15.3",
    "swiper": "^5.4.5",
    "v-viewer": "^1.5.1",
    "vee-validate": "^3.3.7",
    "vue-awesome-swiper": "^4.1.1",
    "vue-chartjs": "^3.5.0",
    "vue-cropperjs": "^4.1.0",
    "vue-easy-dnd": "^1.10.2",
    "vue-glide-js": "^1.3.14",
    "vue-persian-datetime-picker": "^2.2.0",
    "vue-product-zoomer": "^3.0.1",
    "vue-slick-carousel": "^1.0.6",
    "vue-sweetalert2": "^4.2.1",
    "vue2-editor": "^2.10.2",
    "vuedraggable": …

当我使用 Webpack 别名时，我遇到了 @use 规则的问题。

在部分 theme.scss 中，我尝试使用 style.scss 中的 mixin。

/src/assets/css/_theme.scss\n/components/UI/Button/_style.scss\n/components/UI/Button/main.tsx\n/components/UI/Radio/_style.scss\n/components/UI/Radio/main.tsx\n

这适用于相对路径：

@use '../../components/UI/Button/style' as button;\n

但不能使用如下别名：

@use 'Components/UI/Button';\n@use 'Components/UI/Button/style';\n

在第二种情况下，我收到此错误：

SassError: SassError: Can't find stylesheet to import.\n1 \xe2\x94\x82 @use 'Components/UI/Button';\n

别名已在 tsconfig.json 中声明

"baseUrl": "./",\n"paths": { "Components/*": ["src/components/*/main"] }\n

并在我的 Webpack 配置中使用 TsconfigPathsPlugin ：

resolve: {\n    ...\n    plugins: [new TsconfigPathsPlugin()],\n}\n

我在 sass-loader 中没有找到任何用于特定解析的选项。如何在 saas-loader 中使用别名？

Sass-loader 似乎不使用打字稿配置中声明的路径（别名）。因此，简单的 @use 或 @import 会给出未找到的错误。

网页包

resolve: {\n    plugins: [new TsconfigPathsPlugin()],\n

tsconfig

"paths": {\n    "Components/*": ["src/components/*"],\n

结果

SassError: SassError: Can't find stylesheet to import.\n1 \xe2\x94\x82 @use 'Components/UI/Grid';\n

是否可以在 sass-loader 中导入 tsconfig 路径？

我已经在我的项目中安装了 Modern-normalize，并且从 sass 文件中我尝试包含它的 css 文件，如下所示：

@use '~modern-normalize/modern-normalize' as *;\n

然而我不断收到这个消息：

\n

错误：找不到要导入的样式表。\xe2\x95\xb7 9 \xe2\x94\x82 @use\n'~modern-normalize/modern-normalize' as *; \xe2\x94\x82\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^

\n

即使在我的 IDE (vscode) 中，我可以 CMD+单击它，它会很好地导航并打开文件，我在我的 node_modules 目录中看到

我是否缺少一些与配置相关的东西？

我正在创建一个与webpack. 我正在sass项目中使用，所有scss文件都位于scss根目录中。我在名为 的目录中创建了一些部分内容partials。目录结构如下所示：

测验应用程序的目录结构

在文件的顶部quiz.module.scss，我有这个：

@use "colors" as *;\n@use "font";\n

我不想写@use "partials/colors"and @use "partials/font"，所以我决定将其包含在所使用的scss/partials列表中。我的某个地方有这个loadPathsscsswebpack.dev.js：

const PATHS_TO_SASS_PARTIALS = ["scss/partials"]\n

这在其他地方：

{\n  test: /\\.module\\.scss$/,\n  use: [\n    {\n      loader: "style-loader"\n    },\n    {\n      loader: "css-loader",\n      options: {\n        modules: {\n          mode: "local"\n        }\n      }\n    },\n    {\n      loader: "resolve-url-loader"\n    },\n    {\n      loader: "sass-loader",\n      options: {\n        sourceMap: true,\n        sassOptions: …