标签: sass-loader

我刚刚开始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader,我有点失落.

我想要做的是使用我的SPA Vue.js代码的SASS版本的bootstrap.我想这样做,所以我的引导自定义可以使用SASS完成.这就是我所做的:

• 使用vue-cli创建了一个新的Vue.js + webpack项目.
• 安装bootstrap-sass和sass-loader.

• 在build/webpack.base.conf.js中添加了以下内容:

  { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
  { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
  

  Run Code Online (Sandbox Code Playgroud)

• 用一行创建了src/style.scss: @import 'bootstrap';

• 将此行添加到src/main.js的顶部: import './style.scss'

当我现在运行时,npm run dev我收到以下错误:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

我不确定为什么这不起作用.

此外,与此问题相关,如何访问Vue组件中的Bootstrap SASS变量？如果我理解这里发生了什么,SASS将被编译为CSS,然后被包含在main.js内联中,这意味着我的组件中无法访问任何Bootstrap变量.有没有办法实现这个目标？

我刚刚从 Angular 12 升级到 Angular 13，还更新了一些其他 NPM 包。
\n其中一个包含我的 angular.json 文件中引用的 scss 文件。这从来都不是问题，但在尝试为我的应用程序提供服务后，我收到一条对我来说很难理解的错误消息：

./src/styles/ag-grid.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/styles.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\ag-grid.scss 1:9  root stylesheet\n\n./src/styles/products.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles/products.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import 'my-custom-package-layout/src/lib/styles/mixins.scss';\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src\\styles\\products.scss 1:9  root stylesheet\n\n./src/styles/ag-grid.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nHookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  \xe2\x95\xb7\n

我正在尝试在Angular项目中将CSS变量与Sass函数一起使用（准确地说是lighten()/ darken()），据我所知，最新版本的LibSass允许它。

我已经安装node-sass@4.11.0和sass-loader@7.1.0（和角V7.3.0），但我却收到错误

参数$ color of lighten（$ color，$ amount）必须是颜色

我想念什么吗？
谢谢！

我只是想遵循一个教程，该教程告诉我安装 node-sass 和 sass-loader。当我这样做时，我收到以下错误：

 ERROR  Failed to compile with 1 errors                                                                       6:21:28 PM
 error  in ./src/components/TodoList.vue

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (C:\xampp\htdocs\projects\todo-vue\node_modules\sass-loader\dist\index.js:52:26)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de47834","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TodoList.vue 4:14-377 13:3-17:5 14:22-385
 @ ./src/components/TodoList.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
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我的 package.json 文件

{
  "name": "todo-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Jethro Hazelhurst <j.hazelhurst1994@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }, …

我正在运行以下命令：

ng build --prod --aot --base-href ./

并接收；

ERROR in Module build failed (from ./node_modules/sass-loader/lib/loader.js):

$clr-popover-box-shadow-color: rgba(clr-getColor(dark), 0.25);
                              ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /Users/allan/git/dcfrontend/node_modules/@clr/ui/src/utils/_variables.global.scss (line 84, column 32)

我使用的是 Angular 7 和 Clarity 1.04。

摘自我的angular.json：

        "styles": [
          "node_modules/@clr/icons/clr-icons.min.css",
          "node_modules/@clr/ui/clr-ui.min.css",
          "node_modules/prismjs/themes/prism-solarizedlight.css",
          "src/styles.css",
          "node_modules/lato-font/css/lato-font.min.css"
        ],
        "scripts": [
          "node_modules/core-js/client/shim.min.js",
          "node_modules/mutationobserver-shim/dist/mutationobserver.min.js",
          "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
          "node_modules/web-animations-js/web-animations.min.js",
          "node_modules/prismjs/prism.js",
          "node_modules/prismjs/components/prism-typescript.min.js",
          "node_modules/@clr/icons/clr-icons.min.js"
        ]

我有一个项目设置,我用它ExtractTextPlugin来创建一个CSS文件.我试图创建使用注入到页面的样式开发的WebPack配置style-loader,css-loader和sass-loader.

据我所知,默认行为是将样式注入到<style />标记中,我删除了所有痕迹,ExtractTextPlugin但它仍然不想注入样式.

有谁知道什么可能导致样式丢失？我的Webpack配置如下.

配置:

const webpack = require('webpack')

module.exports = config => Object.assign({}, {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: 'bundle.js.map'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
}, config)

叫:

module.exports = require('../../dev')({
  name: 'Onboarding',
  entry: './src/apps/components/Onboarding/index.js'
})

如何在webpack 4中使用sass loader？我读了很多关于这一点,大多数网站建议使用ExtractTextPlugin,但ExtractTextPlugin不适用于webpack 4.

我写了以下webpack.config.js:

const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');


module.exports = {
    module: {
        rules: [
            {
             test: /\.scss$/,
             use: [{
                 loader: "style-loader"
             }, {
                 loader: "css-loader"
             }, {
                 loader: "sass-loader"
             }]
            }
        ]
    },
    plugins: [
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'ADVANCED'
            },
            concurrency: 3,
        })
    ]
};

输出.js文件运行良好,但我的.scss没有编译成css.我试图添加入口点:

entry: {
    stylesheet: path.resolve('src', 'scss/styles.scss'),
    main: path.resolve('src', 'index.js')
}

在此之后我的styles.scss编译为stylesheet.js,但我不是.css.

map.setsass文档给出的示例不起作用，为什么呢？

@use "sass:map";\n\n$font-weights: (\n  \'regular\': 400,\n  \'medium\': 500,\n  \'bold\': 700\n);\n\nmap.set($font-weights, \'extra-bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)\nmap.set($font-weights, \'bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 900)\n

我的sass版本是1.32.5.
\n整个错误消息：

@use "sass:map";\n\n$font-weights: (\n  \'regular\': 400,\n  \'medium\': 500,\n  \'bold\': 700\n);\n\nmap.set($font-weights, \'extra-bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)\nmap.set($font-weights, \'bold\', 900);\n// ("regular": 400, "medium": 500, "bold": 900)\n

我希望设置地图时不会抛出错误。

从dart-sass文档中我们看到dart-sass有命令行版本并且性能更高。

我想知道我们是否可以以某种方式使用该命令行版本与现有的 webpack 设置来加快构建时性能。

我可以在构建机器中安装 dart 库。但是有没有任何 webpack 插件可以利用它并使用机器依赖项来构建 sass 而不是 dart-sass npm？

我在我的项目中包含了一个第三方 SCSS 文件，因此 Dart SASS 显示了一长串警告。如何禁用第三方包含的警告？

我正在使用带有 Dart SCSS 的 Vue。Dart 有一个 quietDeps 选项，但我不确定我是否以正确的方式使用它。

// _common.scss
// Line below causes warnings to be displayed.
@import "~@progress/kendo-theme-default/dist/all";
// ...

// Vue.config.js
module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "~@/styles/common";',
        sassOptions: {
          quietDeps: true
        }
      }
    }
  }
}