Question

我用vue-cli创建了一个新项目，我想在我的项目中使用全局scss文件来应用全局样式。我也想使用字体系列而不在我要使用它的每个组件中导入scss文件

我找到了很多解决方案，但是没有一个对我有帮助。我是webpack的新手，所以很难理解到底出了什么问题。我安装了加载程序npm install sass-loader node-sass --save-dev，并尝试使用webpack做很多事情

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

src / assets / scss / fonts.scss

@font-face {
  font-family: "SuisseIntl";
  src: url("../fonts/SuisseIntl.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-Light";
  src: url("../fonts/SuisseIntl-Light.woff") format("woff");
}
@font-face {
  font-family: "SuisseIntl-SemiBold";
  src: url("../fonts/SuisseIntl-SemiBold.woff") format("woff");
}

$body-bg: red;

我希望能够在每个组件内部的样式标签中使用字体系列，并且希望能够像这样@import '../assets/scss/fonts';那样将scss文件导入组件，但是现在这会导致错误。有谁可以帮助我吗？我应该怎么做才能使其正常工作？

Answer 1

要在组件中使用scss，请确保同时安装了sass-loader和node-sass作为开发依赖项。这将使您可以在具有以下功能的组件中使用scss样式：

<style lang="scss">
</style>

如果要包括一些实际样式（例如在CSS中创建实际样式行的字体之类的东西），请创建一个scss文件并将其包含在最顶层的Vue文件中（默认情况下，诸如App.vue之类的东西）

@import“ ./some/relative/path/to/your/scss/file.scss”;

如果您想在每个组件中包括变量，函数或混合函数而无需显式定义导入，请制作一个scss文件作为此类配置的入口点，例如/scss/config.scss。确保在此文件中不输出任何CSS规则，因为对于每个组件，这些CSS规则将重复很多次。而是使用我之前提到的文件，并在其中导入配置。

然后，转到您的vue.config.js文件，并将以下内容添加到该对象：

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/config.scss";
        `
      }
    }
  }

这将自动加载配置文件。如果仍在使用旧结构，则可以通过在自己的sass-loader中添加一个data选项来获得相同的行为：

  {
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          data: '@import "config";',
          includePaths: [
            path.join(__dirname, 'src/scss') // Or however else you get to your scss folder
          ]
        }
      }
    ],
  },

我如何在Vue项目中使用Scss文件和字体

1 个答案: