标签: sass-loader

我在安装Bootstrap时遇到了一个奇怪的错误。错误如下。我尝试卸载less-loader并安装less-loader@5.0.0，因为我在网上看到它，但它没有任何作用。我不确定在这一步要做什么。

语法错误：TypeError：this.getOptions 不是函数

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 14:3-18:5 15:22-427
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.182:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我的项目结构:

webpack.config.js
app--

   --> src
   ---->> components
   ------>>> myComponent.js
   ------>>> myComponent.scss

   --> styles
   ---->> variables.scss

在webpack.config module.exports中:

...
resolve: {
    alias: {
       styles: path.join(__dirname, 'app/styles') 
   }
}

在我的文件中 - myComponent.scss:

@import "styles/variables";

构建bundle.js时出现此错误:

Module build failed:
@import "styles/variables";
^
      File to import not found or unreadable: styles/variables

我如何在sass文件中@import别名？

我的Webpack配置中有以下模块:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, …

该sass loader医生说:"If you're just generating CSS without passing it to the css-loader, it must be relative to your web root".所以我按照它说的做了,我有我index.html的project root,然后我正在尝试image从我的scss文件中加载一个.现在我有2个错误:1)来自Chrome's console:Cannot find module "./img/header.jpg".2)来自我terminal:

ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css
 @ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91

webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        filename: './public/js/build/bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.jsx?$/,
              exclude: …

我正在尝试通过 webpack 编译我的 Sass。编译正常的 sass 没问题，但出现错误。

 Module not found: Error: Can't resolve '../img/twitter.svg' in '/Users/Steve/mywebsite/scss'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 6:94501-94530

有没有办法解决这个问题？或者，有没有办法将 sass 编译器的级别设置为不那么严格以忽略某些错误

下面是我目前的配置。

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  resolve: {
    alias: {
      masonry: "masonry-layout",
      isotope: "isotope-layout",
    },
  },

  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "./dist/dist2"),
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        include: path.join(__dirname, "/dist/img"),
        loader: "url-loader?limit=30000&name=images/[name].[ext]",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader?presets[]=es2015",
      },

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: …

我有以下示例配置使用带有Webpack 4的mini-css-extract-plugin:

entry: {
   a: ['./js/a.js', './scss/a.scss'],
   b: ['./js/b.js', './scss/b.scss']
},
module: {
    rules: [
       [...],
       {
        test: /\.(css|sass|scss)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    importLoaders: 2,
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    plugins: () => [
                        require('autoprefixer')
                    ],
                    sourceMap: true
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true
                }
            }
        ]
},
optimization: {
    splitChunks: {
        cacheGroups: {
            js: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 7,
            },
            css: {
                test: /\.(css|sass|scss)$/, …

我在尝试编译 Vue2 项目时遇到这个问题

Syntax Error: Error: PostCSS received undefined instead of CSS string
 @ ./src/assets/sass/main.scss 4:14-233 14:3-18:5 15:22-241
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.202:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我尝试重建 sass-loader 但没有成功。

我的节点版本是 v16.6.1 我的 NPM 版本是 7.21.0

Webpack 是 5.1.2，sass-loader 版本是 10.2.0

这是一个 VUE2 项目，当我开始一个新的 Vue3 项目时，一切都开始了，我必须升级 vue/cli 但我不明白如何返回本地（如果这是问题）

刚接触 webpack。试图让 sass-loader 与我的 React 项目一起玩得很好，已经遵循教程。配置似乎正确，但结果总是“无法解析 'sass-loader'”。

我怀疑这是一些非常明显的错误，但我还没有进行多少搜索或谷歌搜索。任何帮助表示赞赏。

错误

ERROR in ./ui/index.js
Module not found: Error: Can't resolve 'sass-loader' in '/root/src'
 @ ./ui/index.js 19:0-33
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./ui/index.js

到目前为止我所做的（在所说的预先存在的反应项目上）：

npm i --save-dev node-sass sass-loader

package.json，在 devDependencies 下

"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"webpack": "~2.2.1",
"webpack-dev-middleware": "~1.12.0",
"webpack-hot-middleware": "~2.20.0",
"webpack-node-externals": "~1.6.0"

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './src/App';

require('./src/styles/main.scss');

ReactDOM.render(<HashRouter><App /></HashRouter>, 
document.getElementById('root'));

webpack.config.react.js：

const path = require('path');
const webpack …

在我的项目中执行 NPM start 时遇到问题。我收到此错误消息：

./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

我刚刚开始使用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变量.有没有办法实现这个目标？